どのようにUseForkIconText ()フックを使用してFormIk支柱にアクセスするには

4726 ワード

小道具やヘルパーにアクセスする超簡単な方法がありますhandleSubmit, handleChange, handleBlur, values, errors, etc インフォーキ.コンポーネントをラップします<Formik>...</Formik> コンテキストとすべての小道具へのアクセスを得るためにフックを使用することができます.
例:
 import React from 'react';
 import { useFormikContext, Formik, Form, Field } from 'formik';

 const AutoSubmitToken = () => {
   // Grab values and submitForm from context
   const { values, submitForm } = useFormikContext();
   React.useEffect(() => {
     // Submit the form imperatively as an effect as soon as form values.token are 6 digits long
     if (values.token.length === 6) {
       submitForm();
     }
   }, [values, submitForm]);
   return null;
 };

 const TwoFactorVerificationForm = () => (
   <div>
     {/* .... */}
     <Formik
       initialValues={{ token: '' }}
       validate={values => {
         {/* ... */}
       }}
       onSubmit={(values, actions) => {
         {/* ... */}
       }}
     >
       <Form>
         <Field name="token" type="tel" />
         <AutoSubmitToken />
       </Form>
     </Formik>
   </div>
 );
完全な例https://formik.org/docs/api/useFormikContext