如何为多步骤表单的每个步骤添加验证检查？

Question

我正在使用react-step-wizard创建多步骤配置文件创建表单。基本上，有3个步骤（OrgInfo，PersonalInfo，SellerToc），我想添加验证（aka：必须填写所有字段）。但是，问题是我当前的参考文献ref={props.register({required: "please enter name",})}不会在每个步骤之后运行。换句话说，我可以将所有输入留空，并且仍然可以。我认为是因为它将仅在第三步激活onSubmit后运行。这是我的代码的简单版本：

const ProfileCreationWizard = (props) => {
    const updateForm = (key, value) => {
    updateState({
      ...state,
      email: auth.user.email,
      [key]: value
    });
    console.log(state);
  };

  const onSubmit = (event) => {
    event.preventDefault();
      setTimeout(() => router.push(`/dashboard/${uid}`),2000)

  }

  return (
    <>
      <Container style={{ textAlign: "center", height: "800px" }}>
        <h2>Complete your profile</h2>
        <br></br>
        {/* <div className="row"> */}
        <div className="onboarding-center">
          <StepWizard
            isHashEnabled
          // instance={setInstance}
          >
            <OrgInfo hashKey={'OrgInfo'} update={updateForm} register={register} errors={errors} handleSubmit={handleSubmit}/>
            <PersonalInfo hashKey={'PersonalInfo'} update={updateForm} register={register} errors={errors} handleSubmit={handleSubmit}/>
            <SellerToc hashKey={'SellerToC'} update={updateForm} onSubmit={onSubmit} register={register}/>
          </StepWizard>
        </div>
        {/* </div> */}
      </Container>
      {formAlert && (
        <FormAlert
          type={formAlert.type}
          message={formAlert.message}
        ></FormAlert>
      )}
    </>
  )
}

export default ProfileCreationWizard;


/* Organization Info Step */
const OrgInfo = props => {
  const update = (e) => {
    props.update(e.target.name, e.target.value);
  };

  return (
    <Container>
      <h4 className="text-center">Step 1: Enter your Organization Info </h4>
      <br />
      <Form>
        <Form.Group as={Row}>
          <Form.Label column sm="4">Organization name:</Form.Label>
          <Col sm="8">
            <Form.Control
              placeholder="Enter your organization's name"
              name="companyName"
              onChange={update}
              type="text"
              error={props.errors.companyName}
              ref={props.register({
                required: "Please enter your organization name",
              })}
            />
          </Col>
        </Form.Group>
      </Form>
      <Stats step={1} {...props} />
    </Container>
  )
}

/* Personal Info Step */
const PersonalInfo = props => {
  return (
    <div>
      <Form>
        <h4 className="text-center">Step 2: Enter your Personal Info </h4>
        <br />
        <Form.Group as={Row}>
          <Form.Label column sm="4">First name:</Form.Label>
          <Col sm="8">
            <Form.Control
              placeholder="Enter your first name"
              name="firstName"
              onChange={update}
              type="text"
              error={props.errors.firstName}
              ref={props.register({
                required: "Please enter your first name",
              })}
            />
          </Col>
        </Form.Group>
      </Form>
      <Stats step={2} {...props} previousStep={validate} />
    </div>
  )
}

/* Seller Terms and Conditions Step  */

const SellerToc = (props) => {

  const validate = () => {
    if (confirm('Are you sure you want to go back?')) { // eslint-disable-line
      props.previousStep();
    }
  };

  return (
    <div>
      <h4><strong>Step 3: Purchase Order Terms & Conditions are only required for sellers.</strong></h4>
      <Container style={{ background: "white", textAlign: "left", border: "solid grey 1px", borderRadius: "10px", height: "400px", overflow: "scroll" }}>
        <h4><strong>Purchase Order Terms and Conditions</strong></h4>
        <br />
      <label>
        <input
          name='termsAgreed'
          type='checkbox'
          checked={props.termsAgreed} 
          onChange={e => props.update(e.target.name, e.target.checked)}
          autoFocus
        />
        <span>Accept</span>
      </label>
      <Stats step={3} {...props} previousStep={validate} nextStep={props.onSubmit} />
    </div>
  )
}

const Stats = ({
  currentStep,
  firstStep,
  goToStep,
  lastStep,
  nextStep,
  previousStep,
  totalSteps,
  step,

}) => {
  const [buttonText, setButtontext] = useState('Finish');
  const buttonFunction = (e) => {
    setButtontext('Loading...')
  }
  const both = (e) => {
    buttonFunction(e);
    nextStep(e);
}
  return (
    <div>
      <br></br>
      {step > 1 &&
        <button className='btn btn-default btn-block' onClick={previousStep}>Go Back</button>
      }

      {step < totalSteps ?
        <button className='btn btn-primary btn-block' onClick={nextStep}>Continue</button>
        :
        <button className='btn btn-success btn-block' onClick={both}>{buttonText}</button>
      }
      <br></br>
    </div>
  )
  };

基本上，我希望它在更改步骤时（不仅在最后）验证我的必填字段。任何建议将不胜感激！