有条件地呈现表单按钮：类型='submit' 的 mui 按钮在呈现时提交表单

Question

我有一个使用Stepper组件的多步骤表单。继续按钮切换为最后一步的"提交表单"按钮。

我遇到的问题是，类型为"submit"的提交按钮将运行表单提交处理程序。。。嗯？？？

有人知道会发生什么吗？

为了避免自动提交，我尝试将"继续"按钮类型设置为"按钮"。这不起作用。

我已经尝试将event.preventDefault()添加到单击按钮中以阻止它提交表单。这也不起作用。

Answer 1

我所需要做的就是提供键属性。这解决了我遇到的自动提交问题。

<Button   
key={activeStep === steps.length - 1 ? 'finish' : 'next'}
variant="contained"
color="primary"
{...(activeStep === steps.length - 1
? { type: 'submit' }
: { type: 'button' })}
{...(activeStep === steps.length - 1
? {}
: { onClick: () => handleStepChange(1) })}
>