如何实现React Formik输入框用户输入时自动强制转换为小写

你原有的Yup大写拦截规则可以完全保留做兜底校验，只需要在输入事件层做值转换同步即可，不会破坏现有表单逻辑。

方案1：适配你现有原生input结构的改法 #

直接在Formik的render props里拿到setFieldValue方法，给input绑定onChange事件，输入时实时转成小写再同步给表单状态：

<Formik
  // 你原有的initialValues、validationSchema（Yup规则）、onSubmit配置全部保留不动
>
  {({ setFieldValue, values }) => (
    <Form>
      <input
        // 你原有的input属性比如type、placeholder、className全部保留
        name="对应字段名"
        value={values.对应字段名}
        onChange={(e) => {
          // 输入值实时转小写后更新表单状态
          const formatValue = e.target.value.toLowerCase();
          setFieldValue('对应字段名', formatValue);
        }}
      />
    </Form>
  )}
</Formik>

方案2：封装可复用输入组件（多字段复用推荐） #

如果表单里有多个需要自动转小写的输入项，用useField封装通用组件，避免重复写转换逻辑：

import { useField, Formik, Form } from 'formik';

// 通用小写输入组件
const LowerCaseInput = ({ name, ...restProps }) => {
  const [field, meta] = useField(name);
  return (
    <>
      <input
        {...field}
        {...restProps}
        onChange={(e) => {
          const lowerValue = e.target.value.toLowerCase();
          // 调用Formik原生onChange同步状态，保证表单交互逻辑一致
          field.onChange({
            target: {
              name: field.name,
              value: lowerValue
            }
          });
        }}
      />
      {/* 原有错误提示逻辑可以直接放这里 */}
      {meta.touched && meta.error ? <span className="error">{meta.error}</span> : null}
    </>
  );
};

// 表单内使用
<Formik /* 原有配置不变 */>
  <Form>
    <LowerCaseInput name="username" placeholder="请输入用户名" />
    <LowerCaseInput name="email" placeholder="请输入邮箱" />
    {/* 其他表单项 */}
  </Form>
</Formik>

注意事项 #

• 不要直接给input的value属性硬写value.toLowerCase()不同步状态，会导致输入时光标自动跳到末尾的问题，必须通过Formik官方提供的状态更新方法同步值。
• 原有的Yup大写拦截规则不要删除，留作兜底校验，防止用户通过修改DOM、接口调试工具等方式绕过前端输入转换。

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