Formik - 從第一次按鍵觸發驗證

Question

在下面的 StackBlitz 中，我有一個非常簡單的表單驗證。 驗證在用戶單擊提交按鈕時完成。

https://stackblitz.com/edit/react-formik-yup-example-uhdg-83teyn?file=Registration.js

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

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>
  );
};

我需要的是：從第一次按鍵觸發驗證（請注意，我對在安裝組件時驗證它不感興趣，而是在第一次按鍵之后）。

換句話說：在 Formik 內的任何輸入上的任何按鍵應該只觸發對該特定輸入的驗證（而不是其他輸入）。 這就像在該輸入中鍵入內容然后按下 Enter 一樣的效果（因為當按下 Enter 時我們觸發驗證）。 但我希望在不按 Enter 鍵的情況下發生這種情況。

關於如何以正確的方式做到這一點的任何想法？

謝謝！

Answer 1

您可以使用<input>等子組件渲染 Field 並處理其 onKeyDown 事件。 以這種方式呈現它可以讓您訪問 Formik 的道具，您可以使用它來觸發驗證。

         <Field name="email">
          {({ field, form }) => (
            <input
              onKeyDown={() => form.setFieldTouched('email')}
              {...field}
              id="email"
            />
          )}
        </Field>
        <ErrorMessage name="email">
          {(error) => <div style={{ color: '#f00' }}>{error}</div>}
        </ErrorMessage>