Блог

Согласно документам, компонент автозаполнения не имеет различия между опцией и фактическим значением.

У меня есть список опций в виде объектов с идентификаторами. Когда я выбираю опцию, я хочу получить ее идентификатор в качестве значения, а не сам объект. Кроме того, когда я устанавливаю значение автозаполнения, я хочу передать только идентификатор.

Возможно ли это?

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

Обновление: метка опции должна оставаться настраиваемой

Чао, к сожалению, значение в 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
   ...
/>
  

Вот пример codesandbox.