reactjs - 使用 useRef 从父组件调用 submitForm

Question

我正在使用 react 钩子(Hook)和 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 函数从组件绑定(bind)到我的 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>
  )
})

现在你可以从 parent 那里得到

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

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

}