reactjs - 需要使用react-hook-form获取三个Modal屏幕数据，试过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 个模态屏幕数据？

标签： reactjsreact-hooksform-datareact-hook-form

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