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

Answer 1

您的问题的答案在这里：

Usage of onChange with AutoComplete Material Ui

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

Answer 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 />
      )}
    />

材料UI自动完成值和onChange

2 个答案: