Reactjs react hook表单仅注册最后一步'；以多级形式存储表单数据

我使用这个css技巧构建了一个多层次表单，我试图使用

react hook form

验证表单，但是

react hook form

只看到step3输入数据，我需要step1到step3的所有输入数据，以便验证并发送到服务器。这是一个简单的网络应用注册表格

import React, { useState } from "react"
import { Link } from "gatsby"
import { useForm } from "react-hook-form"
import { FormTitle } from "../components/input"
import { StepOne, StepTwo, StepThree } from "../components/joinFormSteps"

export default function () {
  const [currentStep, setCurrentStep] = useState(1)
  const { register, handleSubmit } = useForm()

  const _next = () => {
    // If the current step is 1 or 2, then add one on "next" button click
    setCurrentStep(currentStep >= 2 ? 3 : currentStep + 1)
  }

  const _prev = () => {
    // If the current step is 2 or 3, then subtract one on "previous" button click
    setCurrentStep(currentStep <= 1 ? 1 : currentStep - 1)
  }

  const previousButton = () => {
    if (currentStep !== 1) {
      return (
        <button className={styles.join__nxtbutton} type="button" onClick={_prev}>
          Previous
        </button>
      )
    }
    // ...else return nothing
    return null
  }

  const nextButton = () => {
    if (currentStep < 3) {
      return (
        <button
          className={`${styles.join__nxtbutton} ${
            currentStep === 1 ? styles.join__btnMarginRightZero : ""
          } `}
          type="button"
          onClick={_next}
        >
          Next
        </button>
      )
    }

    if (currentStep === 3) {
      return (
        <input
          className={`${styles.join__nxtbutton} ${
            currentStep === 1 ? styles.join__btnMarginRightZero : ""
          } `}
          type="submit"
          name="submit"
          value="Join Now"
        />
      )
    }
    // ...else render nothing
    return null
  }

  const onSubmit = data => {
    console.log(data)
  }

  return (
    <div className={styles.join}>
      <FormTitle title="Become a member" />

      <form className={styles.form} onSubmit={handleSubmit(onSubmit)}>
        <StepOne currentStep={currentStep} register={register} />
        <StepTwo currentStep={currentStep} register={register} />
        <StepThree currentStep={currentStep} register={register} />

        <div className={styles.join__buttonArea}>
          <Link to="/sign-in" className={styles.join__link}>
            Sign in instead
          </Link>
          <div>
            {previousButton()}
            {nextButton()}
          </div>
        </div>
      </form>
    </div>
  )
}

import React，{useState}来自“React”
从“盖茨比”导入{Link}
从“react hook form”导入{useForm}
从“./组件/输入”导入{FormTitle}
从“./components/joinFormSteps”导入{StepOne，StepII，StepThree}
导出默认函数（）{
常数[currentStep，setCurrentStep]=useState（1）
常量{register，handleSubmit}=useForm（）
常数下一个=（）=>{
//如果当前步骤为1或2，则单击“下一步”按钮添加一个步骤
setCurrentStep（currentStep>=2？3:currentStep+1）
}
const_prev=（）=>{
//如果当前步骤为2或3，则单击“上一步”按钮减去1
设置当前步骤（当前步骤{
如果（currentStep！==1）{
返回(
以前的
)
}
//…否则什么也不归还
返回空
}
const nextButton=（）=>{
如果（当前步骤<3）{
返回(
下一个
)
}
如果（当前步骤===3）{
返回(
)
}
//…否则什么也不做
返回空
}
const onSubmit=data=>{
console.log（数据）
}
返回(
改为登录
{previousButton（）}
{nextButton（）}
)
}

实施

import React from "react"
import { Input, SelectInput, CheckboxInput } from "../components/input"
import states from "../assets/nigeria-states.json"
import styles from "./joinFormSteps.module.scss"

export function StepOne({ currentStep, register }) {
  if (currentStep !== 1) {
    return null
  }

  return (
    <React.Fragment>
      <div className={styles.form__row}>
        <div className={styles.form__input}>
          <Input
            label="Firstname*"
            name="firstname"
            type="text"
            placeholder="Firstname"
            register={register}
          />
        </div>

        <div className={styles.form__input}>
          <Input
            label="Lastname*"
            name="lastname"
            type="text"
            placeholder="Lastname"
            register={register}
          />
        </div>
      </div>

      <div className={styles.form__input}>
        <Input
          label="Email*"
          name="email"
          type="email"
          placeholder="abc@xyz.com"
          register={register}
        />
      </div>

      <div className={styles.form__row}>
        <div className={styles.form__input}>
          <Input
            label="Password*"
            name="password"
            type="password"
            placeholder="Password"
            register={register}
          />
        </div>
        <div className={styles.form__input}>
          <Input
            label="Confirm Password*"
            name="confPassword"
            type="password"
            placeholder="Confirm Password"
            register={register}
          />
        </div>
      </div>
    </React.Fragment>
  )
}

export function StepTwo({ currentStep, register }) {
  if (currentStep !== 2) {
    return null
  }

  return (
    <React.Fragment>
      <div className={styles.form__row}>
        <div className={styles.form__input}>
          <Input
            label="Address*"
            name="address"
            type="text"
            placeholder=""
            register={register}
          />
        </div>

        <div className={styles.form__input}>
          <Input label="City*" name="city" type="text" placeholder="" register={register} />
        </div>
      </div>

      <div className={styles.form__row}>
        <div className={styles.form__input}>
          <SelectInput label="State*" name="state" options={states} register={register} />
        </div>

        <div className={styles.form__input}>
          <Input
            label="Postal code"
            name="postalCode"
            type="text"
            placeholder=""
            register={register}
          />
        </div>
      </div>

      <div className={styles.form__input}>
        <Input
          label="Phone Number*"
          name="number"
          type="number"
          placeholder="Phone Number"
          register={register}
        />
      </div>
    </React.Fragment>
  )
}

export function StepThree({ currentStep, register }) {
  if (currentStep !== 3) {
    return null
  }

  return (
    <React.Fragment>
      <div className={styles.form__input}>
        <SelectInput
          label="Membership type*"
          name="memberType"
          options={[
            { code: 1, name: "Associate Membership" },
            { code: 2, name: "Full Membership" },
          ]}
          register={register}
        />
      </div>

      <div className={styles.form__input}>
        <CheckboxInput
          label="How do you identify yourself*"
          options={[
            { name: "author", value: "An Author" },
            { name: "illustrator", value: "An Illustrator" },
          ]}
          register={register}
        />
      </div>
    </React.Fragment>
  )
}

从“React”导入React
从“./components/Input”导入{Input，SelectInput，CheckboxInput}
从“./assets/nigeria states.json”导入状态
从“/joinFormSteps.module.scss”导入样式
导出函数StepOne（{currentStep，register}）{
如果（currentStep！==1）{
返回空
}
返回(
)
}
导出函数Step2（{currentStep，register}）{
如果（当前步骤！==2）{
返回空
}
返回(
)
}
导出函数步骤三（{currentStep，register}）{
如果（当前步骤！==3）{
返回空
}
返回(
)
}

以下代码中存在问题：

导出函数StepOne（{currentStep，register}）{
如果（currentStep！==1）{
返回空
}
回报率（…）；
}
导出函数Step2（{currentStep，register}）{
如果（当前步骤！==2）{
返回空
}
回报率（…）；
}
导出函数步骤三（{currentStep，register}）{
如果（当前步骤！==3）{
返回空
}
回报率（…）；
}

按下“下一步”按钮后，进入下一步。

StepOne

component然后返回

null

，这将使子组件卸载并返回您的字段

若要解决此问题，在步骤之间跳转时不能卸载组件。可以在不想显示组件时隐藏该组件。因此，请尝试将代码更改为：

导出函数StepOne（{currentStep，register}）{
返回(
...
);
}
导出函数Step2（{currentStep，register}）{
返回(
...
);
}
导出函数步骤三（{currentStep，register}）{
返回(
...
);
}

现场演示

---

如果在某个时间卸载steps组件，register ref将丢失该数据。在下一步按钮操作时，尝试恢复该数据。您能否提供一个如何实施该步骤的示例？我刚刚添加了实施在下一步操作时，在currentStep更改之前保存数据（寄存器）