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

Question

我在 React 组件中有一个 Material UI 自动完成表单。它工作完美，除了 ENTER 键当前正在清除输入字段。 我只是希望输入字段不会在用户按下回车键时被清除。我在 Whosebug 上搜索了所有类似的问题，其中 none 处理忽略自动完成表单中的此键（它们主要处理常规输入表单）。下面我列出了所有我尝试过但不起作用的东西。

在这种情况下如何禁用 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

这有效，但它删除了使用键盘 select 值的能力。

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

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

How to Disable the ENTER Key in React Material UI Autocomplete form

javascript

reactjs

autocomplete

material-ui