提交表单时,反应状态持续重置。如何坚持状态? [英] React state keeps resetting on form submittal. How to persist state?
本文介绍了提交表单时,反应状态持续重置。如何坚持状态?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我在试着教自己如何反应,我整晚都在与此作斗争。下面的代码要做的是迭代我的问题数组,并动态更新我的呈现,以替换我的每个表单元素的消息、类型和名称。然而,不断发生的事情(我找不到解决方法)是,在每次提交时,页面会在瞬间更新到问题数组中的下一个对象,但随后会刷新,表单会重置为页面:0状态,询问"有多少个团队?"(而不是递增到"多少轮?"(质询内容已按原意提出)。我尝试将状态向上移动到窗体的父级,但最终只是顺其自然,同样的问题也出现了。
import React from 'react';
import ReactDOM from 'react-dom';
export class Form extends React.Component {
constructor(props) {
super(props);
this.state = {
questions : [
{ message: 'How many teams?',
type: 'number',
name: 'numberOfTeams'
},
{ message: 'How many rounds?',
type: 'number',
name: 'numberOfRounds'
},
{ message: 'How long for each round?',
type: 'number',
name: 'lengthOfRounds'
},
{ message: 'What is your team name?',
type: 'text',
name: 'teamName'
}
],
page : 0
}
this.updatePage = this.updatePage.bind(this);
}
updatePage() {
this.setState(prevState => ({
page: prevState.page + 1
}))
}
render() {
if(this.state.page < this.state.questions.length){
return (
<form onSubmit={ this.updatePage }>
<div className="setup">
<div className="setupInterior">
<h1>{ this.state.questions[this.state.page].message }</h1>
<input type={ this.state.questions[this.state.page].type } name={ this.state.questions[this.state.page].name }></input>
</div>
</div>
</form>
)
} else {
return null
}
}
}
推荐答案
您需要在传递给onSubmit
函数的事件上preventDefault()
避免默认网页表单深渊翻滚,因为您正在重新加载页面。
updatePage(event) {
event.preventDefault();
this.setState(prevState => ({
page: prevState.page + 1
}))
}
这篇关于提交表单时,反应状态持续重置。如何坚持状态?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文