如何在React Material UI自动完成表单中禁用ENTER键

Question

我在React组件中有一个Material UI自动完成表单。它工作得很完美，除了ENTER键当前正在清除输入字段。我只希望输入字段是而不是当用户按ENTER键时清除。我在Stackoverflow上搜索了所有类似的问题，没有一个涉及忽略自动完成表单中的这个键(它们主要处理常规输入表单)。下面我列出了所有我尝试过但不奏效的方法。

在这种情况下我如何禁用ENTER键??

我已经尝试忽略回车键，例如:

onKeyPress={(event) => {return event.key !== 'Enter';}}

我也试过通过这样做来阻止自动完成输入键被作为表单提交(希望它不会清除表单):

onKeyPress={(event) => {
if (event.key === 'Enter') {
event.preventDefault();
return false;
}
}

我甚至试过了:

onKeyPress={(event) => {
if (event.key === 'Enter') {
event.stopPropagation();
return false;
}
}

并且，是的，我还尝试使用onKeyDown代替onKeyPress用于上述两个示例。

最后，我尝试使用disableClearable选项在自动完成组件如下:

const onInputChange = useCallback(
(_event: ChangeEvent<{}>, newInputValue: string) => {
debounceFetchData(newInputValue);
},
[debounceFetchData]
);
return (
<section className={classes.container}>
<SearchIcon className={classes.icon} />
<Autocomplete
id="search"
options={options}
disableClearable
getOptionLabel={() => ''}
filterOptions={(x) => x}
fullWidth
freeSolo
onInputChange={onInputChange}
renderInput={(params) => (
<TextField
{...params}
placeholder="Search"
variant="outlined"
size="small"
inputProps={{
...params.inputProps,
'aria-label': 'Search',
}}
/>
)}
...
...
...
/>

Answer 1

我在这个问题上也坚持了一段时间，在这里找到了答案。

简单地说，它可以通过将onKeyDown处理器传递给<TextField>的inputProps来处理:

<Autocomplete
...
renderInput={(params) => (
<TextField
{...params}
...
inputProps={{
...params.inputProps,
onKeyDown: (e) => {
if (e.key === 'Enter') {
e.stopPropagation();
}
},
}}
/>
)}
...
...
...
/>

Answer 2

这可以工作，但是它取消了使用键盘选择值的能力。

注意{...params}后面的省略号要省略。