useFormikContext() 후크로 Formik 소품에 액세스하는 방법

4753 단어
Formik에는 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

좋은 웹페이지 즐겨찾기