Блог

При работе с HTML select в React мы обычно используем идентификатор или ключ для отслеживания выбранного значения:

 <select value={value} onChange={(event) => setValue(event.target.value)}>
  {options.map((option) => (
    <option value={option.id}>{option.label}</option>
  ))}
</select>
  

Интересно, можем ли мы сделать то же самое с компонентом автоматической компиляции Material-ui, поскольку в его демонстрации значение, установленное в state, является целым объектом, а не идентификатором объекта.

Я попытался использовать его API следующим образом, который имеет смысл для меня, но он работает не так, как ожидалось:

 const fruits = [
  { id: 0, label: "apple" },
  { id: 1, label: "banana" },
  { id: 2, label: "cherries" },
  { id: 3, label: "fig" }
];

function FruitPicker() {
  const [value, setValue] = useState(null);

  return (
    <Autocomplete
      id="fruit-picker"
      value={value}
      onChange={(event, option) => {
        setValue(option?.id || null);
      }}
      options={fruits}
      getOptionLabel={(option) => option.label}
      getOptionSelected={(option) => option.id === value}
      renderInput={(params) => <TextField {...params} label="Fruit" />}
      openOnFocus
    />
  );
}

  

Я создал этот Codesandbox, если вы хотите поиграть. Спасибо.

Это метод, который я использовал.

 <Autocomplete
 options={fruits}
 value={fruits.filter(el => el.id === currentValue)[0]}
 getOptionLabel={option => option.label}
 onChange={(event, option) => { setValue(option?.id || null); }}
/>
  

Поскольку вы передаете options объект массива, поэтому при установке значения onChange вы все равно должны сохранить setValue(option) , но getOptionSelected вместо этого сравнить их идентификаторы

 <Autocomplete
  value={value}
  onChange={(event, option) => {
    setValue(option);
  }}
  options={fruits}
  getOptionLabel={(option) => option.label}
  getOptionSelected={(option) => option.id === value.id}
  renderInput={(params) => <TextField {...params} label="Fruit" />}
  openOnFocus
/>