反応(とネイティブ)を提出し、フォームの外からFormekとの検証

フォームの外部からFormIkからSubmitイベントを呼び出す必要があるとしましょう.The 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) を参照してください.
Formekの検証についての詳細はhttps://formik.org/docs/guides/validation