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" />

现在我要实现的事情是当用户选择一个选项时，我要控制台记录一些内容。我确实在Textfield上尝试了onSubmit，但是它不起作用。

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

Answer 1

根据文档，onChange需要替换onSubmit组件上的Autocomplete属性。只要用户从生成的下拉菜单中选择了新选项，就会触发该事件。如果您的Autocomplete也是“ freeSolo”字段，则仅在输入内容且用户要按“ Enter”键时该字段将不起作用。

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

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

1 个答案: