时间戳

首页 > 解决方案 > 如何从材料 ui 提交自动完成的值？

reactjs - 如何从材料 ui 提交自动完成的值？

问题描述

我已经安装了材料 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 时，我如何控制日志？

标签： reactjsformsmaterial-ui

解决方案

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

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

推荐阅读