React Material TextField如何检测移动端键盘回车/提交事件

云原生阿岚

2026-7-27

问题描述

我正在使用React DOM/Web进行开发，依赖版本如下：

"react": "^18.2.0",
    "react-dom": "^18.2.0",
    "@mui/material": "^5.9.2",

以下是我编写的简单文本框代码：

import { TextField } from "@mui/material";
...
...
<TextField
    onSubmitEditing={onSubmitEditing}

我原本以为React Material的TextField会像React Native一样拥有onSubmitEditing属性，但使用后出现如下错误：

Warning: Unknown event handler property `onSubmitEditing`. It will be ignored.

在浏览器或移动端模拟器中按下回车键也没有任何反应，请问该如何检测移动端键盘的回车/提交事件？

解决方案

MUI的TextField是Web端React组件，不存在React Native的onSubmitEditing属性。要检测回车/提交事件，可采用以下两种方案：

监听onKeyDown事件：判断按键是否为回车键，触发提交逻辑

<TextField
  onKeyDown={(e) => {
    if (e.key === 'Enter') {
      onSubmitEditing();
    }
  }}
/>

结合form标签使用onSubmit事件：将TextField包裹在form标签内，按下回车会自动触发表单提交，同时阻止默认行为避免页面刷新
```
<form onSubmit={(e) => {
  e.preventDefault();
  onSubmitEditing();
}}>
  <TextField />
</form>
```