[英]How to use Formik ErrorMessage properly with formik using render props and design library for inputs?
我想触发 formik 错误并在单击输入且值不正确时进行触摸。 我将 formik props 传递给输入组件,如下所示:
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 props 传递给组件并使用第三个库进行输入时,如何正确使用 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.