如何在Formik Field中实现4位验证码输入框自动切换？

完全可以通过Formik Field实现自动切换功能，核心思路是在输入框的变更事件里判断内容长度，自动聚焦到下一个/上一个输入框，不需要依赖第三方库。结合你的Next.js+React技术栈，直接改造现有代码即可：

1. 改造自定义输入组件（CustomInput） #

给组件添加事件逻辑，处理输入后的聚焦切换，同时保留Formik的表单状态同步：

import { forwardRef } from 'react';

// 用forwardRef传递输入框的DOM引用
const CustomInput = forwardRef(({ field, index, inputRef, ...props }, ref) => {
  const handleInputChange = (e) => {
    // 先触发Formik的onChange更新表单值
    field.onChange(e);
    const { value } = e.target;

    // 输入1位内容后，自动聚焦下一个输入框（4位验证码，索引0-3）
    if (value.length === 1 && index < 3) {
      inputRef.current[index + 1]?.focus();
    }
    // 删除内容后，自动聚焦上一个输入框
    if (value.length === 0 && index > 0) {
      inputRef.current[index - 1]?.focus();
    }
  };

  return (
    <input
      ref={(el) => {
        ref(el);
        // 将当前输入框DOM存入父组件的ref数组
        inputRef.current[index] = el;
      }}
      {...field}
      {...props}
      onChange={handleInputChange}
      maxLength={1} // 限制每个输入框只能输入1位
    />
  );
});

export default CustomInput;

2. 调整Formik组件中的Field调用 #

在Formik里创建存储所有输入框引用的数组，传递给每个Field组件：

<Formik
  initialValues={{ code: ['', '', '', ''] }} // 初始化4位空验证码数组
  onSubmit={values =>
    VerifyGarageFunc({ code: values.code.join(''), requestId: PhoneCodeData.data }, data.showModal)
  }>
  {({ values, handleSubmit }) => {
    // 创建ref数组存储所有输入框DOM
    const inputRefs = useRef([]);

    return (
      <form onSubmit={handleSubmit}>
        <FieldArray
          name="code"
          render={arrayHelpers => (
            <div className={styles.inputWrapper}>
              {values.code.map((item, index) => (
                <div key={index}>
                  <Field
                    name={`code.${index}`}
                    type="text"
                    component={CustomInput}
                    index={index} // 传递当前输入框索引
                    inputRef={inputRefs} // 传递ref数组
                  />
                </div>
              ))}
            </div>
          )}
        />
        <LoginActionButton onSubmit={handleSubmit} text={'Send'} />
      </form>
    );
  }}
</Formik>

关键说明 #

• 用maxLength={1}强制每个输入框只能输入1位字符，确保切换逻辑触发条件准确；
• 通过useRef数组存储所有输入框DOM，避免直接查询DOM，符合React最佳实践；
• 保留Formik原生的field.onChange，确保表单状态能正常同步到Formik的values中。

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