使用Yup做值转换时Formik返回值异常，如何实现邮箱输入自动转小写

问题原因 #

Yup 提供的 transform 方法仅作用于 Yup 内部的校验流程，不会主动修改 Formik 存储的 values 数据，你在输入框绑定的 values.email 仍然是原始输入的大写内容，因此不会显示转换后的小写结果。
同时你的代码存在一个小疏漏：initialValues 中仅声明了 name 字段，缺少需要用到的 email 字段，也可能导致异常。

实现方案 #

方案1：修改输入事件逻辑（最简便，推荐）

直接在输入内容变化时把值转小写再同步给 Formik，无需依赖 Yup 的转换能力：

import React from "react";
import { render } from "react-dom";
import { Formik } from "formik";
import * as Yup from "yup";

import { DisplayFormikState } from "./helper";
import "./style.css";

const validationSchema = Yup.object({
  email: Yup.string()
    .email()
    .required()
    .label("Email")
});

const App = () => (
  <div className="app">
    <Formik
      initialValues={{ email: "" }} // 修正初始值字段
      onSubmit={() => {}}
      validationSchema={validationSchema}
    >
      {(props) => {
        const { handleBlur, handleChange, values, errors, touched } = props;
        return (
          <form onSubmit={props.handleSubmit}>
            <h1>Email Form</h1>

            <input
              type="email"
              name="email"
              onChange={(e) => {
                // 直接把输入值转小写后再传给 Formik 的 handleChange
                const modifiedEvent = {
                  ...e,
                  target: {
                    ...e.target,
                    value: e.target.value.toLowerCase()
                  }
                }
                handleChange(modifiedEvent)
              }}
              onBlur={handleBlur}
              value={values.email}
            />
            {errors.email && touched.email && errors.email}

            <button type="submit">Submit</button>

            <DisplayFormikState {...props} />
          </form>
        );
      }}
    </Formik>
  </div>
);

render(<App />, document.getElementById("root"));

方案2：保留 Yup transform 逻辑同步值

如果你需要保留 Yup 中定义的转换规则，可以在校验阶段把转换后的值同步回 Formik：

<Formik
  initialValues={{ email: "" }}
  onSubmit={() => {}}
  validationSchema={validationSchema}
  validate={(values) => {
    // 手动触发 Yup 校验拿到转换后的值更新到 Formik
    const castedValues = validationSchema.cast(values);
    props.setValues(castedValues);
    return {}
  }}
>
  {/* 其余组件代码保持不变 */}
</Formik>

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