多次使用单选按钮渲染组件时出现问题

Question

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

问题组件的代码

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>
        );
    }
});

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

我犯了什么明显的错误吗？任何帮助表示赞赏。

Answer 1

这是一个更新的 jsfiddle 有效：https://jsfiddle.net/69z2wepo/8365/

问题是您在 React 中使用了所谓的“不受控制的组件”。有关详细信息，请参阅此页面：https://facebook.github.io/react/docs/forms.html

为您的场景更改为受控组件意味着使用checked 而不是defaultChecked。 defaultChecked 用于不受控制的组件，其中输入控件的值（在您的情况下为单选按钮）不受组件的 props 或 render 方法控制。 React 真正设计为使用受控组件，其中 props/state/render 驱动 UI 显示的内容。

从使用 defaultChecked 更改为 checked 时，您首先会注意到您将无法再在 UI 中更改收音机状态。发生这种情况的原因是，尽管您的应用程序的状态在您的 saveData 函数中发生了更改，但您的组件并没有被重新渲染。

有几种不同的方法来处理这个问题。更新的 jsfiddle 在saveData 期间重新渲染您的应用程序。理想情况下，这应该以不同的方式考虑。 saveData 应该从父组件中移出并进入 FormDataStore 概念（参见 React Flux 架构，https://facebook.github.io/flux/docs/overview.html），或者父组件应该拥有 formData 状态并在 @ 中调用 setState 987654340@ 然后将导致重新渲染 DOM 树的该部分。