Reactjs 如何在stepper中提交表单

我试图在material ui的stepper表单上提交我的表单。有关它的更多信息：

无论如何，在我的结帐页面中，我定义了MaterialUIStepper，它有不同种类的组件，它们有自己的形式

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

所以我在等待你的回答。

---

谢谢…

如果您想在表单外部使用按钮提交表单，那么按钮需要表单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>

const handleFormSubmit=（）=>{
//处理表单数据
props.handleNext（）
} 

你的例子和我的变化

<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>

{steps.map（（标签，索引）=>(
{label}
//在此处将handleNext传递给getStepContent
{getStepContent（索引，{checkoutForm，handleChange，handleNext}}
返回
{activeStep===steps.length-1？“完成”：“下一步”}
))}

谢谢您的回答。但问题是handleNext在结帐页面上，我在component@Themaninthepinksuit我认为这无关紧要。您可以使用stepContent中的按钮提交任何表单。可以在表单中定义所需的任何函数。只需确保将update函数或setActiveStep作为道具传递给组件，这样就可以传递handleNext。然后在你的表单const-handleFormSubmit=（）=>{//对formdata做点什么，props.handleNext（）}对不起，我不能理解这一部分：“只要确保你把update函数或setActiveStep作为一个prop传递给你的组件，这样你就可以传递handleNext。然后在你的表单const-handleFormSubmit=（）=>{//do something with formdata，props.handleNext（）}-“我像你说的那样定义了按钮：{activeStep===steps.length-1？”Finish:“Next”}并且我还定义了表单id，但我仍然不知道如何传递handleNext。非常感谢你的清晰回答。它非常棒。

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>