Как сбросить значение автозаполнения antd, если значение отсутствует в источнике данных

Question

Я использую Ant Design AutoComplete для выбора местоположения. И источником данных является массив. Вот мой код.

<Form.Item
   label={t("City")}
   name="location"
   rules={[
      {
          required: true,
          message: t("Please enter your city"),
      },
   ]}
   >
       <AutoComplete
          options={this.props.cityList}
          allowClear={true}
          placeholder={t("Enter your city")}
          className="ant-select-custom"
          filterOption={(inputValue, option) =>
             option.value.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1
          }
       />
</Form.Item>

Проблема в том, что я могу печатать все, что не в источнике данных. Что я хочу это ограничить это. Если я наберу что-то, чего нет в источнике данных, значение должно быть стерто. Я пытался с onBlur() и onChange(), но не повезло. Может ли кто-нибудь помочь мне с этим?

Заранее спасибо

Answer 1

установить значение реквизита в теге автозаполнения и установить для него состояние, проверить, не найдено ли значение при поиске, изменить состояние на исходное.

const [value, setValue] = useState('');

const handleSearch = async val => {
    if (val) {
      const response = await dispatch(yourAction(val));
      if (!response?.length) {
        ...
        setValue(''); // this will clear the input
      } else {
        ...
      }
    } else {
      ...
    }
};

<AutoComplete
 ...,
 value={value}
/>

Это работает для меня.