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

Question

我有一个自动完成字段使用

        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

Answer 1

还尝试在每次输入更新时更改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)}
    />
  }      
}

在这里,我想清楚了输入时,用户按下输入或从列表中选择一些项目(所以我清楚SEARCHTEXT在handleSelect),但我也会改变的状态SEARCHTEXT每个输入更新(handleUpdateInput).

我希望它对你有用!