react-hook-form 只以多级形式注册最后一步的表单数据

我使用这个 css-tricks 构建了一个多级表单article https://css-tricks.com/the-magic-of-react-based-multi-step-forms/我正在尝试使用验证表单react-hook-form，但是react-hook-form只看到步骤 3 输入数据，我需要从步骤 1 到步骤 3 的所有输入数据，以便我可以验证并发送到服务器。这是一个简单的网络应用程序注册表单。

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 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="[email protected] /cdn-cgi/l/email-protection"
          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>
  )
}

这里的问题是在下面的代码中：

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

  return (...);
}


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

  return (...);
}


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

  return (...);
}

按下下一步按钮后，您将进入下一步。StepOne然后组件返回null这使得子组件卸载并且注销 https://react-hook-form.com/advanced-usage/#ConditionalControlledComponent你的领域。

要解决此问题，在步骤之间跳转时不得卸载组件。当您不想显示该组件时，可以通过隐藏该组件来实现此目的。所以尝试将您的代码更改为：

export function StepOne({ currentStep, register }) {
  return (
    <div key={1} style={currentStep !== 1 ? { display: "none" } : {}}>
      ...
    </div>
  );
}


export function StepTwo({ currentStep, register }) {
  return (
    <div key={2} style={currentStep !== 2 ? { display: "none" } : {}}>
      ...
    </div>
  );
}


export function StepThree({ currentStep, register }) {
  return (
    <div key={3} style={currentStep !== 3 ? { display: "none" } : {}}>
      ...
    </div>
  );
}

现场演示