ReactJS

Question

我正在学习 ReactJS，我构建了一个 AppBar 并在其中添加了一个 TextField。它工作得很好。以下是我的代码：

class Test extends React.Component {  
render() {
    return (
    <MuiThemeProvider>
      <AppBar
        title={"Benchmarking"}
        iconElementLeft={<IconButton iconClassName="muidocs-icon-custom-github" />}
        iconElementRight={
          <div>
            <TextField
                hintText='this is a sample text'
            />
          </div>
        }
      />

      </MuiThemeProvider>
    )
  }
}

现在我尝试在 TextField 的地方添加一个 AutoField，它没有抛出任何错误，但是 AppBar 没有显示。可能是什么问题？请帮忙。

Answer 1

AutoComplete 需要 dataSource 和 onUpdateInput 属性，因此您必须提供它们。做这样的事情

 state = {
    dataSource: [],
  };

  handleUpdateInput = (value) => {
    this.setState({
      dataSource: [
        value,
        value + value,
        value + value + value,
      ],
    });
  };

然后将它们作为道具传递给 AutoComplete

  <AutoComplete
          hintText="Type anything"
          dataSource={this.state.dataSource}
          onUpdateInput={this.handleUpdateInput}
        />

这是 Material-UI 中 AutoComplete 页面的 link - http://www.material-ui.com/#/components/auto-complete

ReactJS - 在 Material UI 中的 AppBar 内自动完成

ReactJS - AutoComplete inside AppBar in Material UI

autocomplete

material-ui