如何在 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

我也坚持了一段时间，并在here 上找到了答案。

只需将onKeyDown处理程序传递给<TextField>的inputProps即可处理：

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

Answer 2

这可行，但它消除了使用键盘选择值的能力。

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