如何在步进器中提交表单

Question

我正在尝试在材料 ui 的步进表单上提交我的表单。欲了解更多信息：https://material-ui.com/components/steppers/

无论如何，在我的结帐页面中，我定义了材料 ui 步进器，它有不同种类的组件，它们有自己的形式。

  function getStepContent(step, props) {
      
      switch (step) {
        case 0:
          return <Component1 {...props} />;
        case 1:
          return <Component2 {...props}/>;
        case 2:
        default:
          return "Unknown step";
      }
    }

例如，component1 有自己的表单，当您单击下一步时，您会转到具有不同类型表单的 component2。 Component2 的表单是使用来自 Component1 的表单的信息创建的，这就是为什么我需要在进入下一个表单之前提交表单。但是由于我需要在组件内提交表单，所以我真的很困惑。当然，我尝试将 type="submit" 添加到 Next 按钮，但没有任何影响。

所以基本上这里也定义了步进器如何进行下一步：

<Container>
        <div className={classes.root}>
          <Stepper activeStep={activeStep} orientation="vertical">
            {steps.map((label, index) => (
              <Step key={label}>
                <StepLabel>{label}</StepLabel>
                <StepContent>
                  <Typography>{getStepContent(index, {checkoutForm, handleChange})}</Typography>
                  <div className={classes.actionsContainer}>
                    <div>
                      <Button
                        disabled={activeStep === 0}
                        onClick={handleBack}
                        className={classes.button}
                      >
                        Back
                      </Button>
                      <Button
                        variant="contained"
                        color="primary"
                        onClick={handleNext}
                        className={classes.button}
                      >
                        {activeStep === steps.length - 1 ? "Finish" : "Next"}
                      </Button>
                    </div>
                  </div>
                </StepContent>
              </Step>
            ))}
          </Stepper>
        </div>
      </Container>

所以我想我必须做一些事情来在这里提交组件的表单：

const handleNext = () => {
    setActiveStep((prevActiveStep) => prevActiveStep + 1);
  };

所以我在等你的答案。 谢谢...

Answer 1

如果你想用表单外的按钮提交表单，那么按钮需要带有表单id的表单属性

<button type="submit" form={`form-step${activeStep}`} value="Submit">Submit</button>

然后您传递给表单 onSubmit 的函数将被执行。因此，您可以将 handleNext 传递给表单，并确保表单 id 与按钮的表单属性匹配

以组件 1 中的表单为例 创建一个handleFormSubmit 函数。然后在更改 activeStep 之前对 formdata 做一些事情

const handleFormSubmit = () => {
  // do something with form data
  props.handleNext()
} 

<form id="form-step1" onSubmit={handleFormSubmit}></form>

你的例子和我的改变

<Container>
        <div className={classes.root}>
          <Stepper activeStep={activeStep} orientation="vertical">
            {steps.map((label, index) => (
              <Step key={label}>
                <StepLabel>{label}</StepLabel>
                <StepContent>
// pass handleNext to getStepContent here
                  <Typography>{getStepContent(index, {checkoutForm, handleChange, handleNext})}</Typography>
                  <div className={classes.actionsContainer}>
                    <div>
                      <Button
                        disabled={activeStep === 0}
                        onClick={handleBack}
                        className={classes.button}
                      >
                        Back
                      </Button>
                      <Button
                        variant="contained"
                        color="primary"
// set type submit and form here
                        type="submit"
                        form={`form-step${activeStep}`}
                        className={classes.button}
                      >
                        {activeStep === steps.length - 1 ? "Finish" : "Next"}
                      </Button>
                    </div>
                  </div>
                </StepContent>
              </Step>
            ))}
          </Stepper>
        </div>
      </Container>