使用 Formik 在 React 中轻松编写表单
Formik 是一个非常棒的库，我经常使用它。所以今天我写这篇文章是为了介绍 Formik 的基础知识，并以简单易懂的方式讲解 Formik 的使用方法。
创建并设置登录表单样式
我创建了如下所示的登录表单
<form className="form">
<div className="field">
<label htmlFor="email">Email Address</label>
<input
id="email"
name="email"
type="email"
placeholder="email"
/>
</div>
<div className="field">
<input
id="password"
name="password"
type="password"
placeholder="password"
/>
</div>
<button type="submit" className="submit-btn">
Login
</button>
</form>
并这样搭配了。
.App {
font-family: sans-serif;
text-align: center;
display: grid;
place-items: center;
}
.form {
width: 300px;
display: grid;
gap: 10px 0px;
margin-top: 50px;
background-color: #ddd;
border-radius: 8px;
padding: 10px;
}
.field {
display: flex;
justify-content: space-between;
padding-bottom: 10px;
}
.submit-btn {
width: 80px;
}
.error {
color: red;
font-size: 12px;
justify-self: start;
font-style: italic;
padding-bottom: 10px;
line-height: 3px;
}
之后，你会看到一个和这个一样的登录表单。
初始化 Formik 默认状态
useFormik让我们从 Formik导入第一个组件。
import { useFormik } from "formik";
现在您可以使用 useFormik hook 初始化表单的 initialValues。
const formik = useFormik({
initialValues: {
email: "",
password: ""
},
)}
让我们将其应用于formik我们的输入字段。
...
<input
id="email"
name="email"
type="email"
placeholder="email"
onChange={formik.handleChange}
onBlur={formik.handleBlur}
value={formik.values.email}
/>
...
<input
id="password"
name="password"
type="password"
placeholder="password"
onChange={formik.handleChange}
onBlur={formik.handleBlur}
value={formik.values.password}
/>
对登录字段应用验证
我使用Yup库来对我的字段应用验证，
所以首先Yup像这样导入。
import * as Yup from "yup";
然后我为登录字段添加了验证模式。
const validationSchema = yup.object({
email: yup
.string()
.email('Please enter a valid email address')
.required('Email is required'),
password: yup
.string()
.min(8, 'Please enter strong password')
.required('Password is required'),
})
const formik = useFormik({
initialValues: {
email: "",
password: ""
},
validationSchema,
)};
Yup 在这里会验证字段值是否已提供；如果已提供，则会验证其格式是否正确。
因此，如果根据我们的验证方案出现任何错误，它将被存储在formik's errors一个对象中，我们可以像这样将其打印在字段旁边或下方。
{formik.touched.email && formik.errors.email ? (
<span className="error">{formik.errors.email}</span>
) : null}
现在我们的表单看起来像这样，存在验证错误。
编写提交表单功能
最后一步是submit function对 Formik 值进行操作。您可以导航到下一屏幕、调用函数API或执行任何您想做的事情。我只是在提交时设置了一个状态，并在用户登录时向其显示了一条消息。
const formik = useFormik({
initialValues: {
email: "",
password: ""
},
validationSchema,
onSubmit: (values) => {
setIsLoggedIn(true);
}
});
并将 Formik 的 handleSubmit 函数像这样传递给你的表单。
<form className="form" onSubmit={formik.handleSubmit}>
您的表单已完成字段验证！您可以在这里
找到完整的源代码。
https://codesandbox.io/s/unruffled-tharp-uti1k?file=/src/App.js:727-781
文章来源：https://dev.to/m-hamidmehmood/simple-way-to-write-forms-in-react-with-formik-547d