如何清除材质用户界面中的自动完成字段?

时间:2016-03-31 01:18:17

标签: reactjs material-ui

我需要以编程方式清除<AutoComplete />字段。我现在有一种不太熟悉的方法:

class MyComponent extends Component {
  constructor(props) {
    super(props);
    autoBind(this);

    this.state = { searchText: '' };
  }

  // ...

  chooseTag(tag) {
    this.props.onChooseTag(typeof tag === 'object' ? tag.text : tag);
    setTimeout(_ => { this.setState({ searchText: '' }); }, 500);
  }

  updateInput(text) {
    this.setState({ searchText: text });
  }

  keyPress(event) {
    if (event.which === 44) {
      this.chooseTag(this.state.searchText);
    }
  }

  render() {
    // ...

    <AutoComplete
      name="tagInput"
      ref="input"
      underlineShow={true}
      dataSource={data}
      openOnFocus={true}
      searchText={this.state.searchText}
      onNewRequest={this.chooseTag}
      onUpdateInput={this.updateInput}
      onKeyPress={this.keyPress}
    />
  }
}

我在那里设置了超时,因为如果我立即执行了,它就不起作用,因为在自动完成填充其自己的字段之前有一点延迟。但必须有更好的方法来解决这个问题。

0 个答案:

没有答案