如何在使用useFormik时禁止回车键触发表单提交

你可以通过在表单元素上绑定keydown事件全局拦截回车键提交行为，适配useFormik钩子的写法如下：

方法1：表单全局拦截（推荐） #

直接在绑定了useFormik的form元素上监听keydown事件，判断按下的是回车键时阻止默认行为即可生效：

import { useFormik } from 'formik';
import React from 'react';

const MyForm = () => {
  const formik = useFormik({
    initialValues: {
      input1: '',
      input2: '',
      input3: '',
    },
    onSubmit: (values) => {
      console.log('表单提交', values);
    },
  });

  // 键盘事件拦截逻辑
  const handleKeyDown = (e: React.KeyboardEvent<HTMLFormElement>) => {
    if (e.key === 'Enter') {
      e.preventDefault();
      // 若需要回车触发自定义逻辑（比如跳转到下一个输入框），可以在这里补充代码
    }
  };

  return (
    <form onSubmit={formik.handleSubmit} onKeyDown={handleKeyDown}>
      <input
        type="text"
        name="input1"
        onChange={formik.handleChange}
        value={formik.values.input1}
      />
      <input
        type="text"
        name="input2"
        onChange={formik.handleChange}
        value={formik.values.input2}
      />
      <input
        type="text"
        name="input3"
        onChange={formik.handleChange}
        value={formik.values.input3}
      />
      <button type="submit">提交</button>
    </form>
  );
};

export default MyForm;

方法2：针对单个输入框拦截 #

如果你只需要禁止部分输入框的回车提交行为，可以单独给对应输入框绑定keydown事件：

<input
  type="text"
  name="input1"
  onChange={formik.handleChange}
  value={formik.values.input1}
  onKeyDown={(e) => e.key === 'Enter' && e.preventDefault()}
/>

注意事项 #

如果需要保留点击提交按钮、或者指定快捷键提交的能力，可以在拦截逻辑里加例外判断，比如只在事件目标是输入框时才阻止回车提交：

const handleKeyDown = (e: React.KeyboardEvent<HTMLFormElement>) => {
  if (e.key === 'Enter' && (e.target as HTMLElement).tagName === 'INPUT') {
    e.preventDefault();
  }
};

内容的提问来源于stack exchange，提问作者Rob Bauer