Reactjs ant design onSelect未启动

我试图使用Ant Design，但“onSelect”没有启动。其他一切都很好——当我在搜索栏中键入时，我的配料列表就会出现，并按预期进行筛选。如果控制台在onChange中记录“data”，则会显示搜索值（“data”）。当我从我的过滤弹出菜单中单击一个项目时，该菜单消失，输入中的值与以前相同（即，它不会更改为所选项目），并且不会向控制台触发任何内容。我做错了什么

更新：添加了一个

提前感谢你的帮助

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

导出默认函数Searchbar（）{
const[value，setValue]=useState（“”）
const[options，setOptions]=useState（[]）；
const components=useSelector（state=>state.components）；
const onSearch=（searchTerm:string）=>{
设置选项(
！searchTerm？[]：配料.过滤器（发酵=>
ferment.label.toLowerCase（）.includes（searchTerm.toLocaleLowerCase（））
))
};
const onSelect=（数据：字符串）=>{
console.log（“onSelect”，数据）；
};
const onChange=（数据：字符串）=>{
设定值（数据）；
console.log（数据）
};
返回(
)
}

需要prop

选项

以及必须具有

值的项目

prop

您将

配料

作为

选项

传递给

自动完成

，而配料没有此属性

---

这就是为什么选择的回调

onSelect

没有触发的原因。

从我的判断，这似乎是正确的。你能试着在一个运行的代码沙盒中复制它并在你的问题中链接到这里吗？刚刚添加了一个沙盒。谢谢我无法运行您的代码沙盒。您能否尝试一种更简单的方法来隔离

搜索栏

组件和行为？