Используйте useRef для вызова submitForm из родительского компонента

Question

Я использую реагирующие хуки и useRef для вызова дочернего метода от родителя (см. Здесь: Вызов дочернего метода от родителя )

В частности, я пытаюсь вызвать formik submitFormметод, который находится в моем дочернем компоненте из моего родительского компонента.Я знаю, что есть другие способы сделать это ( React Formik использовать submitForm снаружи) но я бы очень хотел использовать useRef.

const Auth1 = forwardRef((props, ref) => {

  useImperativeHandle(ref, () => ({
    handleSubmit() {
      ///////////formik submitForm function goes here
    }
  }));

  return(
    <div>
      <Formik
          initialValues={props.initValues}
          validationSchema={Yup.object().shape({
            name: Yup.string().required('Required'),
          })}
          onSubmit={(values, actions) => {
            console.log(values)
          }}
          render={({ values }) => (
            <Form>
                <Field
                  name="name"
                  value={values.name}
                  component={TextField}
                  variant="outlined"
                  fullWidth
                />
            </Form>
          )}
        />
    </div>
  )

})

Должен быть способ привязать функцию submitForm из компонента и в тело моего компонента Auth1, но я не совсем уверен, как.

Любая помощь очень ценится, спасибо!

Answer 1

Вы можете извлечь функцию handleSubmit из useImperativeHandle вызова открытого метода из родительского элемента, используя ref

const Auth1 = forwardRef((props, ref) => {

  const handleSubmit = (values, actions) => {
    ///////////formik submitForm function goes here
  }
  useImperativeHandle(ref, () => ({
    handleSubmit
  }), []);

  return(
    <div>
      <Formik
          initialValues={props.initValues}
          validationSchema={Yup.object().shape({
            name: Yup.string().required('Required'),
          })}
          onSubmit={handleSubmit}
          render={({ values }) => (
            <Form>
                <Field
                  name="name"
                  value={values.name}
                  component={TextField}
                  variant="outlined"
                  fullWidth
                />
            </Form>
          )}
        />
    </div>
  )
})

Теперь у родительского элемента вы можете получить

const Parent = () => {
    const authRef = useRef(null);
    ...

    const callSubmit = () => {
        authRef.current.handleSubmit(values, actions);
    }
    return (
          <>
             {/* */}
             <Auth1 ref={authRef} />
          </>
    )

}