验证步进器组件的子表单

Question

我正在使用 React 和material-ui。我正在使用步进器组件来实现电子商务网站的结账渠道：

              <React.Fragment>

                {getStepContent(activeStep)}

                <div className={classes.buttons}>
                  {
                  <Button onClick={handleNext} className={classes.button}>
                    {activeStep === steps.length - 1 ? 'Place order' : 'Next'}
                  </Button>
                </div>
              </React.Fragment>

getStepContent 定义如下：

function getStepContent(step) {
  switch (step) {
  case 0:
    return <ShippingForm cart={cart}/>;
  case 1:
    return <AddressForm cart={cart}/>;
  case 2:
    return <PaymentForm cart={cart}/>;
  case 3:
    return <Review cart={cart}/>;
  default:
    throw new Error('Unknown step');
  }
}

我想在此过程中进行一些验证，例如，除非填写了所有必填字段，否则用户无法越过地址表单。我的问题是“下一步”按钮位于“步骤”组件之外。我对 React 有点陌生，但是 Next 按钮的 handleClick 函数似乎没有好的方法来访问 AddressForm 组件中的数据来进行验证，也没有启动 AddressForm 组件中的某些验证函数。单击“下一步”按钮时进行验证的最佳方法是什么？

Answer 1

终于得到这个了！我使用了 React 的 ref 功能。在渲染步进器的组件主体中，我声明了一个 ref：

export default function Checkout(props) {
...
  let formRef = React.createRef();
...
}

在 中getStepContent，我将 ref 传递给我需要引用的组件：

function getStepContent(step, cart, formRef) {
  switch (step) {
  ...
  case 1:
    return <AddressForm cart={cart} ref={formRef}/>;
  ...
  }
}

AddressForm 组件有一个 validate() 函数。在handleClick步进器的Next按钮的函数中，我调用了formRef.current.validate()调用该函数。呼。