ant design onSelect 没有触发答案

【问题标题】：ant design onSelect is not firingant design onSelect 没有触发
【发布时间】：2021-02-25 18:28:27
【问题描述】：

我正在尝试使用 Ant Design 的 Autocomplete，但“onSelect”没有触发。其他一切都运行良好 - 当我在搜索栏中输入内容时，我的成分列表会出现并按预期过滤。如果我在 onChange 中控制台记录“数据”，则会出现搜索值（“数据”）。当我从过滤后的弹出菜单中单击一个项目时，该菜单消失，输入中的值保持与以前相同（即它不会更改为所选项目）并且不会向控制台触发任何内容。我做错了什么？

更新：添加了sandbox。

提前感谢您的帮助。

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"
      />
       
        </>
    )
}

【问题讨论】：

据我所知，这似乎是正确的。您可以尝试在 running 代码框中复制此内容并将其链接到您的问题中吗？
刚刚添加了一个沙箱。谢谢！
我无法运行您的代码沙箱。您可以尝试一种更简单的方法来隔离您的 Searchbar 组件和行为吗？

标签： reactjs autocomplete components antd uicomponents

【解决方案1】：

<AutoComplete /> 需要道具 options 以及必须具有 value 道具的项目。

您将ingredients 作为options 传递给AutoComplete 并且成分没有此属性。

这就是回调onSelect 没有触发的原因。

【讨论】：