Очистить муравей дизайн автозаполнение

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

Я понял это. Я предположил, что значение Autocomplete было простой строкой, но на самом деле это объект с такой структурой:

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