Question

我正在努力教自己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
    }
}

}

Answer 1

您需要preventDefault()传递给onSubmit函数的事件，以避免默认的Web表单提交，因为您正在重新加载页面。

updatePage(event) {
    event.preventDefault();

    this.setState(prevState => ({
      page: prevState.page + 1
    }))
}

Answer 2

这不能解决这种情况，但是我要添加它，因为它解决了将我带到这里的问题

我在表单中有一个按钮，可以完成不提交操作，并保持重置状态。

请记住添加type =“ button”以避免表单在单击按钮时提交

<button type="button" onClick={(e) => {handleClick(e)}}>Expand Options</button>

React状态不断重置表单提交。如何坚持国家？

2 个答案: