如何在 React Material UI Autocomplete 表单中禁用回车键

Question

我在一个React组件中使用了Material UI的自动完成表单。它工作得很好，除了按下ENTER键会清空输入字段之外。我只想要当用户按下ENTER键时输入字段不被清空。我在Stackoverflow上搜索了所有类似的问题，但没有一个解决在自动完成表单中忽略这个键的（它们大多数是处理常规输入表单）。下面列出了我尝试过但无效的所有方法。

如何在这种情况下禁用ENTER键呢？

我已经尝试忽略ENTER键，例如：

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

我还尝试过通过以下方式阻止自动完成功能中的“Enter”键被视为表单提交（希望它不会清除表单）：

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

我甚至尝试过：

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

是的，我还尝试了在上面两个示例中使用 onKeyDown 而不是 onKeyPress。

最后，我尝试在 Autocomplete 组件中使用 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',
            }}
          />
        )}
        ...
        ...
        ...
      />

- Kim Gentes

Answer 1

我也曾经卡在这里一段时间，后来在这里找到了答案。

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

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

- Kerem atam

---

不要忘记在 onKeyDown 处理程序之前扩展 ...params.inputProps。 - testing_22

Answer 2

这个方法可以实现功能，但是它会禁用使用键盘来选择值的能力。

请注意，在{...params}后面省略省略号。

- mpelzsherman

---

那些 ... 和其他的（在 <Autocomplete 之后，以及接近结尾的 /> 之前）都只是标记，表示“这里有更多的代码”。它们并不是代码本身的一部分。 - Kim Gentes

如果您希望仍然能够使用回车键来选择值，您应该使用 autoHighlight 属性。但是这样做会清除输入框中的内容。 - perkrlsn