Reactjs 多次使用单选按钮呈现组件时出现问题

首先，我正在做一份调查问卷，并决定开始学习React.js。问卷的每个步骤包括一个问题和一个是/否单选按钮组，以及导航按钮。这是我的建议。问题组件非常简单，我在父组件中将formData和save data函数传递给它

和问题组件的代码

var Question = React.createClass({
    getInitialState: function() {
        return {
        }
    },
    createMarkup: function(html) {
        return {
            __html: html
        };
    },

    render: function() {
        var subtitle = this.props.subtitle || '';
        var name = this.props.name;
        if (this.props.formData[name] === undefined) {
            var answer_yes = null;
            var answer_no = null;
        } else {
            answer_yes = this.props.formData[name] == "yes" ? true : null;
            answer_no = this.props.formData[name] == "no" ? true : null;
        }
        console.log(answer_yes);
        console.log(answer_no);
        return (
            <div className="container-question">
                <label className="default" dangerouslySetInnerHTML={this.createMarkup(this.props.question)}></label>
                <span className="alert subtitle" dangerouslySetInnerHTML={this.createMarkup(subtitle)}></span>
                <div className="form-group form-group-radio">
                    <div className="row">
                        <div className="col-xs-4">
                            <input type="radio" id={name + "_yes"} name={name} value="yes" defaultChecked={answer_yes} onChange={this.props.saveData}/><label htmlFor="yes">Yes</label><br></br>
                            <input type="radio" id={name + "_no"} name={name} value="no" defaultChecked={answer_no} onChange={this.props.saveData}/><label htmlFor="no">No</label>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
});

var Question=React.createClass({
getInitialState:函数（）{
返回{
}
},
createMarkup:函数（html）{
返回{
__html:html
};
},
render:function（）{
var subtitle=this.props.subtitle | |“”；
var name=this.props.name；
if（this.props.formData[name]==未定义）{
var-answer_-yes=null；
var-answer_no=null；
}否则{
回答_yes=this.props.formData[name]=“yes”？true:null；
答案_no=this.props.formData[name]=“no”？true:null；
}
控制台日志（回答是）；
控制台日志（应答号）；
返回(
是


不
);
}
});

问题是，当您选择第一个问题的答案并单击“下一步”时，第二个问题上的无线电控制会随之改变，当您首先回答第二个问题时也会发生同样的情况。我将defaultChecked的布尔变量作为局部变量存储在渲染函数中，并将它们记录在控制台中

---

我有什么明显的错误吗？非常感谢您的帮助。

这里是一个更新的JSFIDLE，它可以工作：

问题是您在React中使用的是所谓的“非受控组件”。有关更多详细信息，请参阅本页：

更改为场景的受控组件意味着使用

checked

而不是

defaultChecked

defaultChecked

用于输入控件（在您的情况下为单选按钮）的值不受组件的

props

或

render

方法控制的非受控组件。React的真正设计目的是使用受控组件，其中

道具

/

状态

/

渲染

驱动UI显示的内容

从使用

defaultChecked

更改为

checked

时，您会注意到的第一件事是，您将无法再更改UI中的无线电状态。发生这种情况的原因是，尽管在

saveData

函数中更改了应用程序的状态，但没有重新呈现组件

---

有几种不同的方法来处理这个问题。更新后的JSFIDLE正在

saveData

期间重新呈现应用程序。理想情况下，这应该以不同的方式考虑。应将

saveData

移出父组件，并放入

FormDataStore

概念中（请参见React-Flux体系结构）或者父组件应该拥有

formData

状态，并在

saveData

中对自身调用

setState

，这将导致重新呈现DOM树的该部分。

这很有意义，我选择让父组件拥有formData状态。谢谢你的解释。