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。