Автозаполнение пользовательского интерфейса материала и onChange

Question

Я пытаюсь реализовать автозаполнение для компонента Material UI,

это их код:

  <Autocomplete
      id="combo-box-demo"
      options={top100Films}
      getOptionLabel={option => option.title}
      style={{ width: 300 }}
      renderInput={params => (
        <TextField {...params} label="Combo box" variant="outlined" fullWidth />
      )}
    />

полный код, который вы можете найти здесь: https://github.com/mui-org/material-ui/blob/master/docs/src/pages/components/autocomplete/ComboBox.js

мой вопрос, как мне добавить onChange и быть в состоянии показать выбранное значение, как мы делаем в Input, мы просто показываем значение = {}, но здесь это не работает, и Я ничего не могу найти в документации, спасибо за помощь!

Answer 1

Если вы хотите показать значение текстового поля, я вставил следующее onChange={e=>changeHandler(e.target.value)}

// in Hooks area
const changeHandler = value => {
    console.log(value); // value should be here
}

  <Autocomplete
      id="combo-box-demo"
      options={top100Films}
      getOptionLabel={option => option.title}
      style={{ width: 300 }}
      renderInput={params => (
        <TextField onChange={e=>changeHandler(e.target.value)} {...params} label="Combo box" variant="outlined" fullWidth />
      )}
    />