如何从材料 UI 提交自动完成的值?

Question

我已经安装了材料 UI，我正在从 jsonplaceholder 获得自动完成选项，它工作得很好，这是我的代码：

const [ value, setValue ] = useState([]);
const [ inputValue, setInputValue ] = useState('');
useEffect(() => {
axios
.get('https://jsonplaceholder.typicode.com/posts')
.then((res) => {
setValue(res.data);
})
.catch((e) => {
console.log('error happened');
});
}, []);
<Autocomplete
id="combo-box-demo"
options={value}
getOptionLabel={(option) => option.title}
style={{ width: 300 }}
inputValue={inputValue}
onInputChange={(event, newInputValue) => {
setInputValue(newInputValue);
}}
onSubmit={() => console.log('hey')}
renderInput={(params) => (
<TextField 
onSubmit={() => console.log('hh')}
{...params} 
label="Combo box" variant="outlined" />

现在我要实现的是当用户选择一个选项时，我想控制台记录一些东西。 我确实尝试在文本字段上提交，但它不起作用。

当用户从自动完成中选择选项或在文本字段上按 Enter 时，如何控制台日志？

Answer 1

根据文档，onChange需要替换Autocomplete组件上的onSubmit属性。每当用户从生成的下拉列表中选择新选项时，就会触发此操作。如果你的Autocomplete也是一个"freeSolo"字段，那么当简单地输入某些内容并且用户点击"Enter"时，它将无法工作。

https://material-ui.com/api/autocomplete/