reactjs - 为什么没有填充 Formik `touched` 属性?
问题描述
我正在使用 React、Formik、react-bootstrap 和 yup 制作表单以进行验证。我正在尝试显示验证错误,但该touched
属性未填充字段。
const schema = yup.object({
name: yup.string().required(),
email: yup
.string()
.email()
.required(),
});
const ChildForm = props => {
const { child: { name = '', email = '' } = {} } = props;
const submitHandler = ({name, email}) => console.log(name, email);
return (
<Formik
validationSchema={schema}
onSubmit={submitHandler}
initialValues={{ name, email }}
render={({ handleSubmit, handleChange, values, touched, errors }) =>
{
console.log('touched: ', touched);
return (
<Form noValidate className="mt-4" onSubmit={handleSubmit}>
<Form.Row>
<Form.Group as={Col} controlId="name">
<Form.Label>Full Name</Form.Label>
<Form.Control
name="name"
required
value={values.name}
onChange={handleChange}
isValid={touched.name && !errors.name}
isInvalid={touched.name && errors.name}
type="text"
placeholder="Your child's name"
/>
<Form.Control.Feedback>Looks good!</Form.Control.Feedback>
<Form.Control.Feedback type="invalid">
{errors.name || 'Please enter your child\'s name'}
</Form.Control.Feedback>
</Form.Group>
</Form.Row>
<Form.Row>
<Form.Group as={Col} controlId="email">
<Form.Label>Email Address</Form.Label>
<Form.Control
name="email"
required
value={values.email}
onChange={handleChange}
isValid={touched.email && !errors.email}
isInvalid={touched.email && errors.email}
type="text"
placeholder="Your child's email address"
/>
<Form.Control.Feedback>
No spam, we promise!
</Form.Control.Feedback>
<Form.Control.Feedback type="invalid">
{errors.email || 'Please enter a valid email address'}
</Form.Control.Feedback>
</Form.Group>
</Form.Row>
<Form.Row className="float-right">
<Button variant="success" onClick={handleSubmit}>
<Icon icon={faSave} />
Submit
</Button>
</Form.Row>
</Form>
);
}}
/>
);
}
我在这里做错了什么?总是显示console.log(touched)
一个空对象。
解决方案
@djheru 您的解决方案是正确的,因为Formiktouched
在blur
event 而不是 on 上设置了标志change
。这是 Formik 作者对此的评论:您必须调用 FormikshandleBlur
来通知 Formikblur
事件已被触发 - 所以是的,需要这些处理程序。
推荐阅读
- ffmpeg - 如何使用 ffmpeg 设备录制屏幕?
- c# - 数据访问最佳实践
- c# - ASP.NET Core:HttpPost:多个对象,相同的接口。如何在自定义绑定中使用多态性
- javascript - 无法读取 Discord.js 中未定义的属性“xy”
- javascript - 如何通过 onclick 从 mongoose 集合中删除数据?
- python - bitwise_and 方法上的 OpenCV 断言错误
- javascript - 来自 js/html 的 ASP .NET Core 2.2 MVC 传递参数
- php - websockets / MySQL 实时数据的最佳实践
- git - 如何从命令提示符中删除未跟踪的文件?
- apache - 如何使用 htaccess 重定向以公共路径开头的 URL?