自定义句柄选项在渲染中单击MUI自动完成的选项

Question

所以这是我的代码：

{/* Search suggestions Autocomplete Field */}
{suggestionsFetched && <Autocomplete
disablePortal
id="combo-box-demo"
options={searchSuggestions?.salons.map((salon) => ({
type:'salon',
id:salon.id,
label:salon.name.toLowerCase()
}))
.concat(searchSuggestions?.services.map((service) => ({
type:'service',
id:service.id,
label:service.name.value.toLowerCase()
})))}
renderOption={(props, option) => {
return (
<li 
{...props}
key={option.id}
>
<span style={{
fontWeight:'bolder',
textTransform:'capitalize'
}}>{option.type}:</span>
{"u00A0"}
<span style={{
textTransform:'capitalize'
}}>{option.label}</span>
</li>
);
}}
popupIcon={<Search color='secondary' />}
sx={{
width: '100%',
[`& .${autocompleteClasses.popupIndicator}`]: {
transform: "none"
}
}}
renderInput={(params) => <TextField placeholder="Search" {...params} />}
/>}

我展示的数据有两种类型：沙龙和服务。我想要选择选项并显示它的默认行为。但我也想为类型设置一个状态值。这样做的目的是根据类型直接指向特定的路线。既然我知道onClick功能是在道具中设置的，我该如何覆盖它。这就是我所做的，但它不起作用：

{suggestionsFetched && <Autocomplete
disablePortal
id="combo-box-demo"
options={searchSuggestions?.salons.map((salon) => ({
type:'salon',
id:salon.id,
label:salon.name.toLowerCase()
}))
.concat(searchSuggestions?.services.map((service) => ({
type:'service',
id:service.id,
label:service.name.value.toLowerCase()
})))}
renderOption={(props, option) => {
return (
<li 
{...props}
onClick={()=>{
setSearchRoute(option.type)
props.onClick()
}}
key={option.id}
>
<span style={{
fontWeight:'bolder',
textTransform:'capitalize'
}}>{option.type}:</span>
{"u00A0"}
<span style={{
textTransform:'capitalize'
}}>{option.label}</span>
</li>
);
}}
popupIcon={<Search color='secondary' />}
sx={{
width: '100%',
[`& .${autocompleteClasses.popupIndicator}`]: {
transform: "none"
}
}}
renderInput={(params) => <TextField placeholder="Search" {...params} />}
/>}

在上面的代码中，我试图重置onClick道具，设置我的状态，然后调用默认的onClick函数。但它抛出了这个错误：TypeError:无法读取未定义(读取"currentTarget"(的属性

如何解决此问题并覆盖默认的onClick道具？还是不可能？

Answer 1

所以我找到了解决方案。我只需要写一个onChange函数

value={selectedSuggestion}
onChange={(event, newValue) => {
setSearchRoute(newValue.type)
setSelectedSuggestion(newValue);
}}

newValue参数实际上是在选项道具中传递的对象。这很明显，我不知道为什么我花了这么长时间才弄清楚