我想在 Yup 中转换值，但 Formik 没有返回正确的值

Question

我想将表单（电子邮件）中的值转换为小写。我在 Yup 中有一个转换正在工作，但 Formik 没有显示小写值。

如何才能使当我以大写形式输入电子邮件时，它会自动转换为小写形式？

这是我的代码：

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()
    .transform(function (value, originalvalue) {
      return this.isType(value) && value !== null ? value.toLowerCase() : value;
    })
    .email()
    .required()
    .label("Email")
});

const App = () => (
  <div className="app">
    <Formik
      initialValues={{ name: "" }}
      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={handleChange}
              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"));

Answer 1

Formik 和 Yup 必须承担两项不同的职责：

• Formik 管理表单的状态（值）
• 是的，执行验证并告诉 Formik 这些值是否有效

是的，不会在您的表单中设置值。

从 Yup 转换中删除大小写转换。相反，只需将值设置为小写并setFieldValue()在 yup 进行验证之前将其传递给即可。

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, setFieldValue, values, errors, touched } = props;
        return (
          <form onSubmit={props.handleSubmit}>
            <h1>Email Form</h1>

            <input
              type="email"
              name="email"
              onChange={(e)=>{
                const value = e.target.value || "";
                setFieldValue('email', value.toLowerCase());
              }}
              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"));

现场演示