对多次调用的submit进行多种形式的异步反应

Question

我有一个react应用程序，它包含一个多步骤表单，看起来像：

<React.Fragment>
<form onSubmit={this.handleSubmit}>
<Modal.Header closeButton>
<Modal.Title>Step {this.state.currentStep}: {this._title}</Modal.Title>
</Modal.Header>
<Modal.Body>
{this._step1}
{this._step2}
</Modal.Body>
<Modal.Footer>
{this._footerButtons}
</Modal.Footer>
</form>
</React.Fragment>

其中_step1和_step2只是输入标签的列表，页脚按钮看起来像：

get _footerButtons() {
if (this.state.currentStep == 1) {
return (
<>
<Button className="modal-button-secondary" onClick={this.props.close}>
Cancel
</Button>
<Button className="modal-button-primary" onClick={this._nextStep}>
Continue
</Button>
</>
)
} else if (this.state.currentStep == 2) {
return (
<>
<Button className="modal-button-secondary" onClick={this._prevStep}>
Back
</Button>
<Button type="submit" className="modal-button-primary">Create</Button>
</>
)
}
return null;
}

并且CCD_ 3看起来像：

async handleSubmit(event) {
event.preventDefault()
let data = {
....
}
let result = await fetch(
'http://localhost:8080/',
{
method: 'POST',
body: JSON.stringify(data),
mode: 'no-cors'
}
)
console.log(result)
}

但最终发生的情况是，当从步骤1转换到步骤2时，提交表单通过调用handleSubmit以及在步骤2中调用create按钮来发出请求。

编辑：this._nextStep如下所示：

_nextStep() {
let currentStep = this.state.currentStep
currentStep = currentStep + 1
this.setState({
currentStep: currentStep
})
}

Answer 1

您应该对表单使用ref，当单击步骤2的按钮时，使用该ref来显式处理表单提交。

注意：如果不起作用，请发布您的this._nextStep代码