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>
    )
  }
}

现在我尝试在AutoField的位置添加TextField，它没有抛出任何错误，但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}
        />

以下是AutoComplete中Material-UI页面的链接 - http://www.material-ui.com/#/components/auto-complete

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

1 个答案: