Formik - 在 Blur 上显示 ErrorMessage

Question

在下面的代码中，有一个文本输入在以下情况下显示错误消息：

• 输入 invalid email（或留空）并回车
• 输入无效的 email（或留空）并模糊（或单击外部）

import { ErrorMessage, Field, Form, Formik } from 'formik';
import React from 'react';
import * as Yup from 'yup';

const TextInput = ({ value, handleChange }) => (
  <input
    type="text"
    value={value}
    onChange={(e) => handleChange(e.target.value)}
  />
);

export default () => {
  return (
    <Formik
      initialValues={{
        email: '',
      }}
      validationSchema={Yup.object().shape({
        email: Yup.string()
          .required('Email is required.')
          .email('Email is invalid.'),
      })}
      onSubmit={(values, { setSubmitting }) => {
        console.log(values);
        setSubmitting(false);
      }}
      enableReinitialize
    >
      {({ setFieldValue }) => (
        <Form>
          <div>
            <Field
              type="text"
              name="email"
              onChange={({ target: { value } }) => {
                console.log(value);
                setFieldValue('email', value);
              }}
            />
            <ErrorMessage name="email">
              {(error) => <div style={{ color: '#f00' }}>{error}</div>}
            </ErrorMessage>
          </div>
          <input type="submit" value="Submit" />
        </Form>
      )}
    </Formik>
  );
};

现在我想在进行以下更改时保持相同的行为：

从

<Field
    type="text"
    name="email"
    onChange={({target:{value}}) => {
        console.log(value);
        setFieldValue("email", value);
    }}
/>

到：

<Field
    component={TextInput}
    name="email"
    handleChange={(value) => {
        console.log(value);
        setFieldValue("email", value);
    }}
/>

我的意思是，基本上我正在从： type="text"更改为component={TextInput} ，这基本上是一个文本输入，如您在上面所见。

进行更改后，错误发生在：

• [成功] 输入无效的 email（或留空）并回车

但不是什么时候：

• [失败] 输入无效的 email（或留空）和模糊（或单击外部）

您知道如何在第二种情况下显示错误吗？

我正在寻找一种标准的方法来做到这一点，而不是棘手的解决方法。

在这里，您有一个可以玩的StackBlitz ，如果您愿意，可以发布您的分叉版。

谢谢！

Answer 1

我处理这个问题的方法是在组件和包装器之间传递name和id ，否则，Formik 没有任何关系，因此不知道会发生什么错误。

这是一个叉子

import { ErrorMessage, Field, Form, Formik } from 'formik';
import React from 'react';
import * as Yup from 'yup';

const TextInput = ({ value, handleChange, name, id }) => (
  <Field
    id={id} // <- adding id
    name={name} // <- adding name
    type="text"
    value={value}
    onChange={handleChange} // You don't need to capture the event, you've already done the work in the wrapper
  />
);

export default () => {
  return (
    <Formik
      initialValues={{
        email: '',
      }}
      validationSchema={Yup.object().shape({
        email: Yup.string()
          .required('Email is required.')
          .email('Email is invalid.'),
      })}
      onSubmit={(values, { setSubmitting }) => {
        console.log(values);
        setSubmitting(false);
      }}
      enableReinitialize
    >
      {({ setFieldValue }) => (
        <Form>
          <div>
            <Field
              component={TextInput}
              id="email" // <- id
              name="email" // <- name
              handleChange={e => {
                const value = e.target.value;
                console.log(value);
                setFieldValue('email', value);
              }}
            />
            <ErrorMessage name="email">
              {(error) => <div style={{ color: '#f00' }}>{error}</div>}
            </ErrorMessage>
          </div>
          <input type="submit" value="Submit" />
        </Form>
      )}
    </Formik>
  );
};