reactjs - 如何清除material-ui自动完成字段中的文本？

我有一个自动完成字段

        searchText = {this.state.searchText}

像这样;

      <AutoComplete
        floatingLabelText='agent input'
        ref='agentInput'
        hintText="type response"
        multiLine = {true}
        fullWidth = {true}
        searchText = {this.state.searchText}
        onNewRequest={this.sendAgentInput}
        dataSource={this.agentCommands}
      />

但是当我更新this.setState({searchText: null })
它将清除一次autoComplete，但不会第二次。

不知道这是一个错误还是有其他重置字段的方法。

我还尝试寻找该字段并添加ref但没有运气。

如果是错误，请在此处提交
https://github.com/callemall/material-ui/issues/2615

最佳答案

还尝试在每次输入更新时更改searchText：

onUpdateInput={this.handleUpdateInput}

每当用户更改输入时，此函数应更改searchText：

handleUpdateInput(text) {
  this.setState({
    searchText: text
  })
}

我的代码如下（ES6）：

class MyComponent extends Component {
  constructor (props) {
    super(props)

    this.dataSource = ['a', 'b' ,'c']
    this.state = {
        searchText: ''
    }

  }

  handleUpdateInput (t) { this.setState({ searchText: t }) }

  handleSelect (t) { this.setState( { searchText: '' }) }

  render () {
    return <AutoComplete dataSource={this.dataSource}
                         searchText={this.state.searchText}
                         onNewRequest={this.handleSelect.bind(this)}
                         onUpdateInput={this.handleUpdateInput.bind(this)}
    />
  }
}

在这里，我想在用户按下Enter键或从列表中选择某项时清除输入（因此我清除了handleSelect中的searchText），但是我还在每次输入更新（handleUpdateInput）上更改了searchText的状态。

希望它对您有用！

关于reactjs - 如何清除material-ui自动完成字段中的文本？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/34387787/