React(Native) Form 외부에서 Formik으로 제출 및 검증

어떤 이유로든 양식 외부에서 Formik의 Submit 이벤트를 호출해야 한다고 가정해 보겠습니다. 양식은 예를 들어 외부 구성 요소에 있습니다. useRef 후크는 여기에서 도움이 될 것입니다:

import React, { useState, useRef } from 'react';

const YourComponent = () => {
  const formRef = useRef();
  const [input, setInput] = useState({});
  const [step, setStep] = useState(1);

  const saveInput = () => {
    if (formRef.current) {
      formRef.current.handleSubmit();
      if (formRef.current.isValid) {
        setStep(2);
      }
    }
  };

  const ValidationSchema = Yup.object().shape({
    name: Yup.string().min(2, 'Too Short!').max(50, 'Too Long!').required('Required'),
  });

  return (
    <View>
      <Formik
        initialValues={{
          name: '',
          description: '',
          points: '',
          redemptionsTotal: '',
          redemptionsPerUser: '',
        }}
        validationSchema={QrCodeSchema}
        validateOnChange={true}
        validateOnBlur={false}
        validateOnMount
        onSubmit={(values) => setInput(values)}
        innerRef={formRef}
      >
        {({ handleChange, handleBlur, values, touched, errors }) => {
          return (
            <FormInput
              allowFontScaling={false}
              onChangeText={handleChange('name')}
              onBlur={handleBlur('name')}
              value={values.name}
              error={errors.name}
              touched={touched.name}
              name="name"
              placeholder="TITLE"
              returnKeyType="next"
              blurOnSubmit={false}
              style={styles.inputStyle}
            />
          );
        }}
      </Formik>
      <YourActionsComponent>
        <Button name="submit" title={'Define Dates'} onClick={() => saveInput()} style={styles.stepButton} />
      </YourActionsComponent>
    </View>
  );
};

이 작은 예제에서 사용자가 모든 단계에서 몇 가지 입력을 채우는 마법사와 같은 모달이 있는 경우 양식이 마운트될 때 잘못된 입력이 있는지 확인하고 단계 변경이 발생하지 않도록 설정합니다. 그렇다면.

Formik의 양식 데이터를 양식 ref에 저장하면 양식의 모든 중요한 상태에 액세스할 수 있으며(자세한 내용을 보려면 console.log(formRef.current) 실행) 이 방법으로 외부에서 프로그래밍 방식으로 제출을 호출할 수 있습니다.

Formik 유효성 검사에 대한 자세한 정보https://formik.org/docs/guides/validation