Material-UI Autocomplete хранит только одно свойство объекта - PullRequest
Новая
       11

Material-UI Autocomplete хранит только одно свойство объекта

0 голосов
/ 21 января 2020

Я пытаюсь использовать Автозаполнение , но мне нужно, чтобы хранилище значений содержало только указанное свойство c, а не полный объект.

Например, этот случай является свойством Value, но может быть любым. 

const options = [
  { Value: 1, label: "Option 1", anyOtherProp: 123 },
  { Value: 2, label: "Option 2", anyOtherProp: 456 },
  { Value: 3, label: "Option 3", anyOtherProp: 789 }
];

export default function App() {
  const [value, setValue] = useState(null);

  const valueKey = "Value"; // this should be any key

  const handleChange = (e, value) => {
    // what to do here?
    setValue(value[valueKey]);
  };    

  return (
    <div className="App">
      <Autocomplete
        options={options}
        onChange={handleChange}
        value={value}
        getOptionLabel={option => option.label}
        renderInput={props => <TextField {...props} fullWidth />}
      />
    </div>
  );
}

Когда я это делаю, ввод пуст и ничего не показывает.

Мне нужно, чтобы значение было только одним свойством объекта, а не объекта полного параметра.

Вот код codesandbox , который показывает проблему.

1 Ответ

1 голос
/ 21 января 2020

Проверьте на value и позвоните на setValue. также замените value реквизиты на CustomAutocomplete на defaultValue, все будет работать нормально. Проверьте скрипку Ссылка скрипки 

export default function App() {
  const [value, setValue] = useState(null);

  const valueKey = "Value"; // this should be any key

  const handleChange = (e, value) => {
    // what to do here?
    if(value) setValue(value[valueKey]);
  };

  return (
    <div className="App">
      <CustomAutocomplete
        onChange={handleChange}
        defaultValue={value}
        options={options}
      />
    </div>
  );
}
...