Question

我正在使用react钩子和useRef从父级调用子级方法（请参见此处：Call child method from parent）

具体来说，我正在尝试从父组件调用位于子组件中的formik SubmitForm方法。我知道还有其他方法可以执行此操作（React Formik use submitForm outside <Formik />），但我真的很想使用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

您可以使用ref从父类的useImperativeHandle调用公开方法中拉出handleSubmit函数

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} />
          </>
    )

}

使用useRef从父组件调用SubmitForm

1 个答案: