如何禁用 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只需将处理程序传递给inputPropsof即可处理<TextField>：

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