ReactJS中如何阻止按下回车键提交表单

以下两种方案可实现需求：

方案一：监听表单键盘事件，阻止回车键默认行为 #

在表单上绑定onKeyDown事件，捕获回车键并阻止其默认的表单提交行为，同时保留提交按钮的正常功能。

const handleSubmit = (e) => {
  e.preventDefault();
  // 编写表单提交逻辑，比如收集数据、发送请求
  const formData = new FormData(e.target);
  const name = formData.get('name');
  console.log('提交内容:', name);
};

const handleKeyDown = (e) => {
  if (e.key === 'Enter') {
    e.preventDefault();
  }
};

return (
  <form onSubmit={handleSubmit} onKeyDown={handleKeyDown}>
    <label>
      Name:
      <input type="text" name="name" />
    </label>
    <input type="submit" value="Submit" />
  </form>
);

方案二：改用普通按钮触发提交 #

将原有的submit类型输入框改为button类型，通过按钮的点击事件手动触发提交逻辑，彻底规避表单默认的回车提交行为。

如果使用React状态管理输入值，代码会更优雅：

import { useState } from 'react';

const MyForm = () => {
  const [name, setName] = useState('');

  const handleSubmit = () => {
    console.log('提交内容:', name);
    // 执行提交操作，比如调用API
  };

  return (
    <form>
      <label>
        Name:
        <input 
          type="text" 
          name="name" 
          value={name}
          onChange={(e) => setName(e.target.value)}
        />
      </label>
      <button type="button" onClick={handleSubmit}>Submit</button>
    </form>
  );
};

注意点 #

• 方案一中，handleSubmit必须调用e.preventDefault()，否则点击提交按钮会触发浏览器默认的页面刷新行为。
• 方案二中，若不需要状态管理，也可以直接通过DOM获取输入框值，但推荐使用React状态保持组件的受控性。

内容的提问来源于stack exchange，提问作者Tanvir Ahmed