自动完成组件可以有不同的值和选项类型吗？

Question

根据文档，Autocomplete 组件在选项和实际值之间没有区别。

我有一个选项列表作为带有 id 的对象。当我选择一个选项时，我想将其 id 作为一个值，而不是对象本身。另外，当我设置 Autocomplete 的值时，我只想传入 id。

有可能吗？

<Autocomplete
  options={[{id: 1, label: 'foo'}, {id: 2, label: 'bar'}]}
  value={1}
  onChange={(_, value) => { /* value should be number (id) */ }}
/>

更新：选项标签应保持可配置

Answer 1

Ciao，不幸的是，onChange 事件的值返回所选的options 之一。所以不可能只返回元素的一个属性。

你唯一能做的就是拿value.id：

<Autocomplete
   options={[
      { id: 1, label: "foo" },
      { id: 2, label: "bar" }
   ]}
   getOptionLabel={(option) => option.label}    // this to show label on Autocomplete
   getOptionSelected={(option, value) => option.id === value.id}   // this to compare option on id value
   onChange={(event, value) => console.log(value.id)}  // here access to id property of value object
   ...
/>

Here 一个代码框示例。