Question

我使用reactjs制作测验应用程序，当我更改测验时所有内容都会发生变化但检查状态不会更改（此处没有道具或状态）。通过以下代码更改视图测验：

render: function () {
            var content = [];
            var answers = this.props.quiz.answer;
            if (this.props.quiz.type == "single") {
                for (var i = 1; i <= Object.keys(answers).length; i++) {
                    content.push(<div className="quiz-answer" key={i}>
                        <input type="radio"  value={answers[i]} />
                        {answers[i]}
                    </div>)
                }
                ;
            } else if (this.props.quiz.type == "multi") {
                for (var i = 1; i <= Object.keys(answers).length; i++) {
                    content.push(<div className="quiz-answer" key={i}>
                        <input type="checkbox"  value={answers[i]} />
                        {answers[i]}
                    </div>)
                }
                ;
            } else if (this.props.quiz.type == "text") {
                content.push(<div className="quiz-answer">
                    <input type="text"/>
                </div>)
            } else {
                content.push(<div className="quiz-answer"></div>)
            }

            return (
                    <form className="quiz">
                    {content}
                    </form>
            )

我也提出了一个问题，但是他们说这只是一个使用问题，https://github.com/facebook/react/issues/4583

任何人都有这样的问题吗？

更新1：

https://jsfiddle.net/bsn6ckgv/2/ 我的流程：当用户回答并点击下一个问题时，这将呈现另一个问题。这是我的旧版本有一些bug，明天我会更新这个。但是当您检查并接下来时，视图会更改所有但已检查的信息未删除

更新2：

https://jsfiddle.net/bsn6ckgv/29/ 我认为我需要尽量减少我的代码，而不是更新所有逻辑和许多未使用的组件。流程在这里：您检查答案并单击“检查答案” - ＆gt;你转向一个新问题。但是检查状态没有变化：|每件事都要投降....我没有在这里提出任何逻辑检查答案。似乎需要添加状态或道具来管理已检查的信息。

更新3：修复

            if (this.props.quiz.type == "single") {
                for (var i = 1; i <= Object.keys(answers).length; i++) {
                    content.push(<div className="quiz-answer" key={questionIndex + "-" + i}>
                        <input type="radio"  value={answers[i]} />
                        {answers[i]}
                    </div>)
                };
            } else if (this.props.quiz.type == "multi") {
                for (var i = 1; i <= Object.keys(answers).length; i++) {
                    content.push(<div className="quiz-answer" {questionIndex + "-" + i}>
                        <input type="checkbox"  value={answers[i]} />
                        {answers[i]}
                    </div>)
                }
                ;

Answer 1

现在我可以在那里解决这个问题。这里的问题是组件的键当键更改此选中状态重置时。所以我用前缀设置键是我的问题索引，现在一切都好了：D

Reactjs重新输入输入但不更改已检查状态

更新1：

更新2：

更新3：修复

1 个答案: