material-ui 使用带有差异值、选项类型的自动完成
material-ui using Autocomplete with diff value,option type
我只想在一个值中存储一个选项的 id
自动完成看起来值的类型和选项的类型必须相同
所以我尝试在 onChange 中更改值它起作用了
但 renderOption 效果不佳
https://codesandbox.io/s/naughty-sun-s4x9y
这是我最后一次尝试的示例代码
您可以通过在 Autocomplete
组件上设置 renderTags
属性 来做到这一点:
renderTags={(value, getTagProps) => (
<>
{value.map((id, index) => (
<Chip
label={values.find(o => o.id === id)?.name}
{...getTagProps({index})}
/>
))}
</>
)}
getTagProps
函数负责为 Chip
设置 onDelete
处理程序。我们必须通过找到与此 id
匹配的选项并返回其 name
.
来为 Chip
手动设置 label
我只想在一个值中存储一个选项的 id
自动完成看起来值的类型和选项的类型必须相同
所以我尝试在 onChange 中更改值它起作用了
但 renderOption 效果不佳
https://codesandbox.io/s/naughty-sun-s4x9y
这是我最后一次尝试的示例代码
您可以通过在 Autocomplete
组件上设置 renderTags
属性 来做到这一点:
renderTags={(value, getTagProps) => (
<>
{value.map((id, index) => (
<Chip
label={values.find(o => o.id === id)?.name}
{...getTagProps({index})}
/>
))}
</>
)}
getTagProps
函数负责为 Chip
设置 onDelete
处理程序。我们必须通过找到与此 id
匹配的选项并返回其 name
.
Chip
手动设置 label