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

【问题标题】：ReactJS - AutoComplete inside AppBar in Material UIReactJS - Material UI 中 AppBar 内的自动完成
【发布时间】：2017-04-24 09:10:58
【问题描述】：

我正在学习 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 没有显示。可能是什么问题？请帮忙。

【问题讨论】：

标签： reactjs autocomplete material-ui

【解决方案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 - http://www.material-ui.com/#/components/auto-complete中AutoComplete页面的链接

【讨论】：

我的错。我尝试使用状态参数。非常感谢。