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

這有效，但它刪除了使用鍵盤輸入 select 值的能力。

請注意，應省略{...params}之后的省略號。

Answer 2

我也堅持了一段時間，並在這里找到了答案。

只需將onKeyDown處理程序傳遞給<TextField>的inputProps即可處理：

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