使用 useRef 从父组件调用 submitForm

Question

我正在使用 React Hooks 和 useRef 从父级调用子方法（参见此处：）

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

从 parent 调用公开的方法

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

}

使用 useRef 从父组件调用 submitForm

Use useRef to call submitForm from a parent component

reactjs

formik

react-hooks