在提交表单结果之前，React Form会在提交按钮上重新呈现

Question

在我的React应用程序中，父组件中有一个表单，该表单根据我的值从多个页面(子组件(中呈现一个表单页面。(例如：如果值=1，则显示父注册页面，如果值=2，则显示子注册页面等(

<form onSubmit={this.handleSubmit}
...
<Button type = "submit" onClick={this.renderNewPage}</Button>
</form>

handleSubmit = e =>{
const {ParentName, ChildName, ..., Country} = this.state;
//checking before sending to backend
console.log(ParentName);
console.log(ChildName);
....
}

点击该提交按钮，表单转到"提交"；感谢您注册"；通过renderNewPage()翻页

问题是在表单的末尾，当我单击提交按钮时，onClick首先在表单的onSubmit属性之前被触发。因此，在将表单信息打印到控制台之前，表单会转到新页面

我认为onClick={this.renderNewPage}在onSubmit={this.handleSubmit}之前被调用。有没有办法让renderNewPage()保持(或延迟(直到handleSubmit()完成？

我的react应用程序有好几行100行，所以我只发布与问题相关的重要部分(我认为(。如果上面的代码没有包含足够的信息，请告诉我，我会尽力提供更多信息。

Answer 1

是的，单击首先启动；可以将renderNewPage的内容包装在setTimeout 中

renderNewPage = () => {
setTimeout(()=>{
//your code
},0)
}

根据任一功能的作用，控制台日志可能会短暂闪烁。