使用 react-hook-form 构建的多页表单顶层的 React Hooks答案

【问题标题】：React Hooks at the top level of a multi page form built with react-hook-form使用 react-hook-form 构建的多页表单顶层的 React Hooks
【发布时间】：2019-11-06 23:54:51
【问题描述】：

我正在尝试使用 react-hook-form，它是一种多步骤形式，其中一个步骤具有条件 form field。

该字段的条件是boolean 属性为真。如果是真的，我想展示一组与该属性相关的问题。

我找到了这个example，我尝试按照它的逻辑进行尝试，如下所述：

import React, { useEffect } from "react";
import ReactDOM from "react-dom";

import useForm from "react-hook-form";
import { withRouter } from "react-router-dom";
import { useStateMachine } from "little-state-machine";
import updateAction from "./updateAction";




const Techniques = props => {
  const { register, unregister, handleSubmit, setValue, watch, errors } = useForm();
  const { action } = useStateMachine(updateAction);
  const onSubit = data => {
    action(data);
    props.history.push("./ProposalInnovation");
  };

const fundingOffer = watch("fundingOffer");

const CustomInput = React.memo(({ register, unregister, setValue, fundingOffer }) => {
  useEffect(() => {
    register({ fundingOffer });

    return () => unregister(fundingOffer);
  }, [fundingOffer, register, unregister]);
  return <input onChange={e => setValue(fundingOffer, e.target.value)} />;
});

function App() {
  const { register, unregister, handleSubmit, setValue, watch } = useForm();
  const fundingOffer = watch("fundingOffer");


  return (

    <div>
      <form onSubmit={handleSubmit(onSubit)}>

        <label>Test for condition:</label>
        <radio 
          ref={register} 
          name="fundingOffer"

        />

        <label>Conditional Field:</label>
        {fundingOffer == true && (
          <CustomInput {...{ register, unregister, setValue, fundingOffer: false }} />
        )}



        <input type="submit" value="next" />    




      </form>

    </div>  
  );
};
};

export default withRouter(Techniques);

当我在我的代码中尝试此操作时，我收到一条错误消息：

无法在回调中调用 React Hook useEffect。 React Hooks 必须在 React 函数组件或自定义 React Hook 函数中调用

我认为问题在于我在多步表单中使用了钩子 - 所以这可能算作不在顶层（当我进入多步表单时）。

有谁知道如何在这种表单构造的钩子中使用条件逻辑？

【问题讨论】：

你显示所有代码？因为它看起来不错
技术到底是什么？似乎缺少返回一些 html 并且缺少结束 }。我也很困惑为什么你在这里有你的应用程序组件，并且默认情况下只使用路由器导出技术组件。这些组件的整个结构似乎不完整且非常混乱。你能分享一个codePen或CodeSandbox吗？

标签： javascript reactjs react-hooks react-hook-form

【解决方案1】：

我建议将页面构建到多个路由中，并且每个页面都将您的数据提交到本地存储：redux、mobx、little-state-machine 等等......最后您可以将所有数据提交到服务中.

您的路线：

<Routes>
  <Page1 />
  <Page2 />
</Routes>

您的个人页面：

const Page1 = (props) => {
  const { register, handleSubmit } = useForm();

  const onSubmit = (data) => {
    // update your data into your store
    props.history.push('/page2')    
  }

  return <form onSubmit={handleSubmit(onSubmit)}>
    <input name="data" ref={register} />
   </form>
}

作为参考，您也可以参考我们的文档网站：

https://react-hook-form.com/advanced-usage#WizardFormFunnel

【讨论】：