material-ui 使用带有差异值、选项类型的自动完成

Question

我只想在一个值中存储一个选项的 id

自动完成看起来值的类型和选项的类型必须相同

所以我尝试在 onChange 中更改值它起作用了

但 renderOption 效果不佳

https://codesandbox.io/s/naughty-sun-s4x9y

这是我最后一次尝试的示例代码

Answer 1

您可以通过在 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