如何解决如何使用渲染道具和设计库作为输入,将Formik ErrorMessage与Formik正确使用?
我想触发formik错误,并在单击输入且值不正确时进行触摸。 我将formik道具传递给输入组件,例如:
const initialValues = {
title: ''
};
const validationSchema = yup.object({
title: yup.string().max(50,'less than 50 words !!').required('required !!')
});
function Add() {
<Formik initialValues={initialValues} onSubmit={onSubmit} validationSchema={validationSchema}>
{(props) => {
return (
<Form>
<AddTitle props={props} />
</Form>
);
}}
</Formik>
);
}
在这里,我试图在触摸输入时显示错误消息,并且有这样的错误:
import { Input } from 'antd';
function AddTitle(props) {
console.log(props.props);
return (
<Field name="title">
{() => {
return (
<Input
onChange={(e) => {
props.props.setFieldValue('title',e.target.value)
}}
/>
);
}}
</Field>
<ErrorMessage name="title" />
<P>
{props.props.touched.title && props.props.errors.title && props.props.errors.title}
</P>
</React.Fragment>
);
}
但是当触摸输入并清空输入时,ErrorMessage及其下面的段落不起作用。
在控制台日志中,它显示输入不处理formik触摸的方法,并且仅触发该错误:
touched:
__proto__: Object
errors:
title: "less than 50 words !"
__proto__: Object
在将formik道具传递到组件并使用第三个库作为输入时,如何正确使用ErrorMessage?
解决方法
通过将onBlur添加到输入中来解决此问题,并且ErrorMessage可以正常工作:
<Field name="title">
{() => {
return (
<Input
onBlur={() => props.props.setFieldTouched('title')}
onChange={(e) => {
props.props.setFieldValue('title',e.target.value);
}}
/>
);
}}
</Field>
<P class="mt-2 text-danger">
<ErrorMessage name="title" />
</P>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。