17

以下を使用するAutocompleteフィールドがあります。

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 は 1 回クリアされますが、2 回目はクリアされません。

これがバグなのか、フィールドをリセットする別の方法があるのか​​ はわかりません。

また、フィールドを探して a を追加しようとしましたrefが、うまくいきませんでした。

バグの場合はここに提出 https://github.com/calleall/material-ui/issues/2615

4

3 に答える 3

21

また、入力が更新されるたびに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 をクリアします)が、入力の更新ごとにsearchTextの状態も変更します( handleUpdateInput )。

私はそれがあなたのために働くことを願っています!

于 2016-01-30T09:24:46.307 に答える