如何在步进器中提交表单
How to submit the form in stepper
我正在尝试在 material ui 的 stepper 表单上提交我的表单。有关它的更多信息:https://material-ui.com/components/steppers/
无论如何,在我的结帐页面中,我定义了 material 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);
};
所以我在等你的答案。
谢谢...
如果要在表单外提交带有按钮的表单,那么按钮需要带有表单id的form属性
<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>
我正在尝试在 material ui 的 stepper 表单上提交我的表单。有关它的更多信息:https://material-ui.com/components/steppers/
无论如何,在我的结帐页面中,我定义了 material 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);
};
所以我在等你的答案。 谢谢...
如果要在表单外提交带有按钮的表单,那么按钮需要带有表单id的form属性
<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>