我在表单(电子邮件)中有一个值,我想将其转换为小写。我在 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"));
Formik 和 Yup 必须承担两项不同的职责:
- Formik 管理表单的状态(值)
- 是的,执行验证并告诉 Formik 这些值是否有效
是的,不会set您表单中的值。
从 Yup 转换中删除大小写转换。相反,只需将值设置为小写并将其传递给setFieldValue()
在进行验证之前。
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"));
现场演示 https://codesandbox.io/s/react-formik-yup-forked-gu1lnm?file=/src/App.js
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)