Блог

Главная - Вопросы по программированию - ant design onSelect не запускается

ant design onSelect не запускается

#reactjs #autocomplete #components #antd #uicomponents

#reactjs #автозаполнение #Компоненты #antd #uicomponents

Вопрос:

Я пытаюсь использовать автозаполнение из Ant Design, но «onSelect» не запускается. Все остальное работает хорошо — когда я набираю в строке поиска, появляется мой список ингредиентов и фильтруется по назначению. Если я консольно регистрирую «данные» в onChange, отображаются значения поиска («данные»). Когда я нажимаю на элемент из моего отфильтрованного всплывающего меню, меню исчезает, значение во входных данных остается таким же, как и раньше (т. Е. Оно Не изменяется на выбранный элемент), и на консоль ничего не выводится. Что я делаю не так?

ОБНОВЛЕНИЕ: добавлена изолированная среда.

Заранее спасибо за вашу помощь.

 export default function Searchbar() {
  const [value, setValue] = useState('')
  const [options, setOptions] = useState<{ value: string }[]>([]);

  const ingredients = useSelector(state => state.ingredients);

  const onSearch = (searchTerm: string) => {
    setOptions(
      !searchTerm ? [] : ingredients.filter(ferment =>
        ferment.label.toLowerCase().includes(searchTerm.toLocaleLowerCase())
      ))
    };

    const onSelect = (data: string) => {
      console.log("onSelect", data);

    };

    const onChange = (data: string) => {
      setValue(data);
      console.log(data)
    };
     
    return (
      <>

    <AutoComplete
        options={options}
        value={value}
        style={{ width: 200 }}
        onSelect={onSelect}
        onSearch={onSearch}
        onChange={onChange}
        placeholder="looking for"
      />
       
        </>
    )
}

Комментарии:

1. Из того, что я могу сказать, это кажется правильным. Можете ли вы попробовать воспроизвести это в работающем codesandbox и связать его здесь в своем вопросе?

2. Только что добавлена песочница. Спасибо!

3. Я не могу запустить ваш codesandbox. Можете ли вы попробовать более простой вариант, который изолирует ваш Searchbar компонент и поведение?

Ответ №1:

<AutoComplete /> ожидает prop options с элементами, которые должны иметь value prop.

Вы передаете ingredients as options AutoComplete , а ингредиенты не обладают этим свойством.

Это причина, по которой обратный onSelect вызов не запускается.

Ответ №2:

При создании параметров поиска нам нужно указать value key :pair , например value: item?.title, , для onSelect, чтобы понять, какой из них был выбран.