需要使用 react-hook-form 获取三个 Modal screens 数据，试过 useFormContext 没有成功

Question

我在我的项目中使用 react-hook-form 来处理表单数据。

我有一个 create 功能，它具有三个模态屏幕，我需要在第三页提交时提供全部三个模态屏幕数据。我怎样才能得到这个？

我试过 useFormContext 但它检索的是最后的第三个模态屏幕数据而不是整个数据。

// Parent Component
const Parent = () => {
  const [page, setPage] = useState(1);
  const nextPage = () => setPage(page + 1);
  const previousPage = () => setPage(page - 1);
  const methods = useForm();

 return (  
   <FormProvider {...methods}>
   // after submitting 3 forms, I get 3rd form data here, below line
    <form onSubmit={methods.handleSubmit(data => console.log(data))}> 
      {page === 1 && (
        <CreateOne
          nextPage={nextPage}
          cancel={cancel}
        />
      )}
      {page === 2 && (
        <CreateTwo
          previousPage={previousPage}
          nextPage={nextPage}
        />
      )}
      {page === 3 && (
        <CreateThree
          previousPage={previousPage}
          cancel={cancel}
        />
      )}
     </form>
    </FormProvider>
  );
}

const CreateOne = ({ nextPage, cancel }) => {
  const methods = useFormContext();

  return (
    <input ... ref={methods.register} />
    <input ... ref={methods.register} />
    <input ... ref={methods.register} />
    
    <Button onClick={cancel} text="cancel" />
    <Button type="submit" onClick={nextPage} text="next"/>
  );
}

const CreateOTwo = ({previousPage, nextPage}) => {
  const methods = useFormContext();

  return (
    <input ... ref={methods.register} />
    <input ... ref={methods.register} />
    <input ... ref={methods.register} />
    
    <Button onClick={previousPage} text="previousPage" />
    <Button type="submit" onClick={nextPage} text="next"/>
  );
}

const CreateOThree = ({previousPage}) => {
  const methods = useFormContext();

  return (
    <input ... ref={methods.register} />
    <input ... ref={methods.register} />
    <input ... ref={methods.register} />
    
    <Button onClick={previousPage} text="previousPage" />
    <Button type="submit" text="submit"/>
  );
}

谁能帮我指点一下？如何获取 3 个模态屏幕数据？

Answer 1

我解决了这个问题...在这里发布答案，这样可以帮助其他人..

// Parent Component
const Parent = () => {
  const [page, setPage] = useState(1);
  const nextPage = () => setPage(page + 1);
  const previousPage = () => setPage(page - 1);
  const [finalObj, setFinalObj] = useState(null);

 useEffect(() => {
// this if, checks and then once 3rd form form data is available, we call parent fn.
    if (page === 3) {  
      CallParentWhichTriggeredThisModal(vendor);
    }
  }, [page]); // this useEffect hook gets called for each page state change, as we passed 
 //this as the second array of parameters.

  const page1= (data) => {
    setFinalObj((prevState) => ({ ...prevState, ...data }));
    nextPage();
  };

  const page2= (data) => {
    setFinalObj((prevState) => ({ ...prevState, ...data}));
    nextPage();
  };

  const page3= async (data) => {
// this setState below is an asynchronous, so if you call your parent fn, just below this, // then you might lose the 3rd page data. to fix this, we used useEffect.
    setFinalObj((prevState) => ({ ...prevState, ...data}));
  };


 return (  
   <> 
      {page === 1 && (
        <CreateOne
          nextPage={nextPage}
          cancel={cancel}
          submitForm={page1}
        />
      )}
      {page === 2 && (
        <CreateTwo
          previousPage={previousPage}
          nextPage={nextPage}
          submitForm={page2}
        />
      )}
      {page === 3 && (
        <CreateThree
          previousPage={previousPage}
          cancel={cancel}
          submitForm={page3}
        />
      )}
    </>
  );
}

const CreateOne = ({ submitForm, nextPage, cancel }) => {
  const methods = useFormContext();
  const { register, handleSubmit } = useForm();

  return (
 <form onSubmit={handleSubmit(submitForm)}>
    <input ... ref={register} />
    <input ... ref={register} />
    <input ... ref={register} />
    
    <Button onClick={cancel} text="cancel" />
    <Button type="submit" text="next"/>
  </form>
  );
}

const CreateOTwo = ({submitForm, previousPage, nextPage}) => {
  const methods = useFormContext();
  const { register, handleSubmit } = useForm();

  return (
 <form onSubmit={handleSubmit(submitForm)}>
    <input ... ref={register} />
    <input ... ref={register} />
    <input ... ref={register} />
    
    <Button onClick={cancel} text="cancel" />
    <Button type="submit" text="next"/>
  </form>
  );
}

const CreateOThree = ({submitForm, previousPage}) => {
  const methods = useFormContext();
  const { register, handleSubmit } = useForm();

  return (
 <form onSubmit={handleSubmit(submitForm)}>
    <input ... ref={register} />
    <input ... ref={register} />
    <input ... ref={register} />
    
    <Button onClick={cancel} text="cancel" />
    <Button type="submit" text="next"/>
  </form>
  );
}

需要使用 react-hook-form 获取三个 Modal screens 数据，试过 useFormContext 没有成功

Need to get three Modal screens data using react-hook-form, tried useFormContext and not successful

form-data

reactjs

react-hooks

react-hook-form