如何从材料 ui 提交自动完成的值？答案

【问题标题】：How can I submit the value of an autocomplete from material ui?如何从材料 ui 提交自动完成的值？
【发布时间】：2020-10-01 06:58:30
【问题描述】：

我已经安装了材料 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" />

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

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

【问题讨论】：

你试过onChange方法prop吗？
@GhassenLouhaichi 是正确的。 onChange 是你想要的。在Autocomplete 组件（而不是TextField）上设置onChange 将在用户选择新项目以完成时进行更改。
向 Textfield 组件提供 onChange 将导致它在每次用户键入时执行，而将其提供给 Autocomplete 组件将在用户选择选项时触发。不过我不确定 Enter 键。
@GhassenLouhaichi，如果用户使用键盘选择了新选项并点击“回车”，它仍应触发该事件。
@GhassenLouhaichi 感谢自动完成中的 onChange 编码工作正常再次感谢。

标签： reactjs forms material-ui

【解决方案1】：

根据文档，onChange 需要替换 Autocomplete 组件上的 onSubmit 属性。只要用户从生成的下拉列表中选择了一个新选项，这就会触发。如果您的Autocomplete 也是一个“freeSolo”字段，那么当简单地输入某些内容并且用户要按“Enter”时，它将不起作用。

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

【讨论】：

感谢它在我选择一个选项时有效，但在我按 enter 时无效。在自动完成上按 Enter 时如何运行函数？
向您的TextField 添加一个“onKeyDown”侦听器，并在触发的函数中添加一个带有if(event.key === 'enter'){ submitInput(event.value)} 之类的if 语句（其中submitInput 是一个将其发送到后端的函数通过您选择的 w/e 方法）。
const handleEnter = (e) => { if (e.key === 'enter') { console.log('ff'); } }; handleEnter(e)} {...params} /> 我这样做了但是没有用，我哪里弄错了？
我发现它应该是 e.keyCode === 13 而不是 e.key === 'enter' 谢谢你的帮助。
我的错字了。它应该是“输入”而不是“输入”。执行 keyCode 也可以，除非用户从他们的 10 键盘上按“Enter”。然后，它将失败 iirc。