清除蚂蚁设计自动完成答案

【问题标题】：Clear ant design autocomplete清除蚂蚁设计自动完成
【发布时间】：2020-03-02 11:04:17
【问题描述】：

我的页面标题中有一个 Ant Design 自动完成组件（用于搜索）。每次路线更改时，我都想清除文本。这是自动完成的代码：

<AutoComplete
  dataSource={options}
  onSelect={this.onSelectOption}
  onSearch={this.search}
  labelInValue
  optionLabelProp="option"
  defaultActiveFirstOption={false}
>
  <Input
    ref={input => {
      this.searchBar = input;
    }}
    onPressEnter={e => this.goTo(e)}
  />
</AutoComplete>

我尝试使用自动完成的value 属性并将其设置为状态，但没有任何反应。还尝试在子Input 框中设置value，但那里也没有任何反应。也尝试过this.searchBar.value = "test";，但没有。

注意事项： - 我正在使用ref 和Input 子组件，因为我需要能够动态设置焦点以及调用onPressEnter

【问题讨论】：

可重现的例子？

标签： javascript reactjs antd

【解决方案1】：

我想通了。我假设自动完成值是一个简单的字符串，但它实际上是一个具有这种结构的对象：

{ key: '', label:'' }

在我尝试使用value 属性之前，我使用undefined 或空白字符串设置了一个变量。所以现在改为这样做：

<AutoComplete
  dataSource={options}
  onSelect={this.onSelectOption}
  onSearch={this.search}
  labelInValue
  onFocus={() => this.setState({ focus: true })}
  onBlur={() => {
    this.setState({
      focus: false,
      searchInput: { key: undefined, label: undefined }
    });
  }}
  value={this.state.searchInput}
  onChange={e => this.setState({ searchInput: e })}
>
  <Input
    ref={input => {
      this.searchBar = input;
    }}
    onPressEnter={e => this.goTo(e)}
  />
</AutoComplete>

【讨论】：