如何使用渲染道具和输入设计库将 Formik ErrorMessage 与 formik 一起正确使用？

Question

我想在单击输入且值不正确时触发 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 方法，它只会触发它的错误：

touched:
__proto__: Object
errors:
title: "less than 50 words !"
__proto__: Object

如何在将 formik props 传递给组件并使用第三个库进行输入时正确使用 ErrorMessage？

Answer 1

通过将 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>

如何使用渲染道具和输入设计库将 Formik ErrorMessage 与 formik 一起正确使用？

How to use Formik ErrorMessage properly with formik using render props and design library for inputs?

javascript

reactjs

formik