使用 useRef 从父组件调用 submitForm

Question

我正在使用反应钩子并使用 Ref 从父方法调用子方法(请参阅此处：从父级调用子方法(

具体来说，我正在尝试从我的父组件调用位于我的子组件中的 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

你可以从 useImperativeHandle 中提取 handleSubmit 函数，使用 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} />
          </>
    )
}