Material UI 自动完成值和 onChange答案

【问题标题】：Material UI auto complete value and onChangeMaterial UI 自动完成值和 onChange
【发布时间】：2020-02-16 11:41:49
【问题描述】：

我正在尝试在 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 中所做的那样，我们只显示 value={} 但在这里它不起作用，我找不到任何关于它的信息在文档中，感谢您的帮助！

【问题讨论】：

在这个答案中查看我的示例（在Autocomplete 元素上使用onChange 和value 道具）：stackoverflow.com/questions/59035788/…

标签： reactjs autocomplete material-ui

【解决方案1】：

您的问题的答案在这里：

Usage of onChange with AutoComplete Material Ui

您应该正确使用onChange。该值位于回调函数的第二个参数上。

【讨论】：

【解决方案2】：

如果你想显示文本字段的值，我插入了以下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 />
      )}
    />

【讨论】：

嗨，这不起作用，我看不到输入中的选定值，也看不到传递给函数的项目，changeHandler(event) 也被标记为语法错误。
抱歉 - 已修改，请立即尝试
感谢您的帮助，但它不起作用，如果您选择该值，您不会在输入中将其视为“已选择”（它保持空白），并且控制台日志不会触发。