Formik是一个用于构建表单的React库。它提供了一种简化和优化表单处理的方式,包括表单验证、表单状态管理和表单提交等功能。
在将Formik分离成组件后,可以通过使用Formik的验证功能来显示验证错误消息。以下是一种可能的实现方式:
npm install formik
import { Formik, Field, ErrorMessage } from 'formik';
import * as Yup from 'yup';
const validationSchema = Yup.object().shape({
username: Yup.string().required('用户名不能为空'),
password: Yup.string().required('密码不能为空'),
});
<Formik
initialValues={{ username: '', password: '' }}
validationSchema={validationSchema}
onSubmit={(values, { setSubmitting }) => {
// 处理表单提交逻辑
console.log(values);
setSubmitting(false);
}}
>
{({ isSubmitting }) => (
<form>
<div>
<label htmlFor="username">用户名</label>
<Field type="text" name="username" />
<ErrorMessage name="username" component="div" />
</div>
<div>
<label htmlFor="password">密码</label>
<Field type="password" name="password" />
<ErrorMessage name="password" component="div" />
</div>
<button type="submit" disabled={isSubmitting}>
提交
</button>
</form>
)}
</Formik>
在上述代码中,initialValues
定义了表单字段的初始值,validationSchema
定义了验证规则,onSubmit
定义了表单提交处理函数。Field
组件用于渲染表单字段,ErrorMessage
组件用于显示验证错误消息。
这样,当用户在表单中输入数据时,Formik会自动根据验证规则进行验证,并在相应的字段下方显示错误消息。
腾讯云相关产品和产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云