forms - React 状态在表单提交时不断重置。如何持久化状态?
问题描述
我正在尝试自学 React,并且整晚都在为此苦苦挣扎。下面的代码打算做的是遍历我的问题数组并动态更新我的渲染以替换我的每个表单元素的消息、类型和名称。然而,一直在发生的事情,我找不到解决办法是,在每次提交时,页面会在一瞬间更新到问题数组中的下一个对象,然后刷新并且表单重置为页面: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
}
}
}
解决方案
您需要preventDefault()
将事件传递给onSubmit
函数以避免默认的 Web 表单提交,因为您正在重新加载页面。
updatePage(event) {
event.preventDefault();
this.setState(prevState => ({
page: prevState.page + 1
}))
}
推荐阅读
- angular - Angular Material 选项卡在 ngOnInit 之后导航到选定的选项卡
- excel - 无法获取范围类的 FindNext 属性
- sql - Oracle 查询(PROC)没有给出想要的结果
- modx - Modx 赋予用户添加新用户的权限
- java - HTML 文件中显示的编码字符
- java - 无法在休眠状态下连接到服务器数据库
- spring-boot - spring boot 2:手动加载application.properties
- installation - 下载 Fuchsia 源码——更新项目或包时,由于致命错误,Jiri 钩子无法运行
- oracle - Oracle 报告 REP-0820:无法导入指定的图像
- c - C 预处理器或 C++ 魔术自动为每个文件创建一个对象?