Antd Form含多个文本输入框时按下回车无法提交

API 探路者

2026-5-29

解决Antd Form多输入框回车不触发onSubmit的问题

嘿，我来帮你搞定这个小问题～其实这不是你操作错了，而是浏览器和Antd Form的默认行为导致的：

问题原因

浏览器有个默认规则：当表单里只有一个文本输入框时，按下回车键会自动触发表单的submit事件；但如果表单里有多个可聚焦的输入元素，浏览器就不会自动触发提交了——它得等你明确点击提交按钮或者手动触发提交动作。Antd Form遵循了这个浏览器默认行为，所以多输入框时回车没反应。

两种解决方案

方案1：添加隐藏的提交按钮

给表单加一个htmlType="submit"的按钮，哪怕把它隐藏起来，浏览器就能识别到提交入口，回车时就会触发onSubmit回调了：

<Form onSubmit={(e) => {
  e.preventDefault();
  console.log('提交触发啦！');
}}>
  <Input placeholder="输入框1" />
  <Input placeholder="输入框2" />
  {/* 隐藏的提交按钮，不影响页面布局 */}
  <Button type="primary" htmlType="submit" style={{ display: 'none' }}>提交</Button>
</Form>

方案2：手动绑定回车事件触发提交

用Antd Form的useForm钩子获取表单实例，然后给每个输入框的onPressEnter事件绑定提交动作：

import { Form, Input, Button } from 'antd';

const MyForm = () => {
  const [form] = Form.useForm();

  const handleSubmit = () => {
    console.log('手动触发提交了！');
    // 这里也可以用form.validateFields()先做校验
  };

  return (
    <Form form={form} onSubmit={handleSubmit}>
      <Form.Item name="input1">
        <Input onPressEnter={() => form.submit()} placeholder="输入框1" />
      </Form.Item>
      <Form.Item name="input2">
        <Input onPressEnter={() => form.submit()} placeholder="输入框2" />
      </Form.Item>
      {/* 也可以保留可见的提交按钮，兼顾两种提交方式 */}
      <Button type="primary" htmlType="submit">提交</Button>
    </Form>
  );
};