Question

我的页面标题中有一个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属性并将其设置为状态，但是什么也没有发生。还尝试在子value框中设置Input，但同样也没有任何反应。还尝试做this.searchBar.value = "test";，但什么也没做。

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

Answer 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>

清晰的蚂蚁设计自动完成

1 个答案: