ReactJS-管理的复选框组

Question

作为帮助我学习ReactJS的一种方式，我正在设置一些应该很容易的东西，但事实证明对我来说有些棘手。

我想在ReactJS中设置一些托管复选框组。在HTML中，复选框“字段”实际上由许多共享公共名称属性的input type=“checkbox”元素组成。据我所知，这只是一种UI元素，应该适合ReactJS的组合特性。

我有两个组件：

首先，Checkbox Field是针对复选框组中的每个单独条目-即，每个输入类型="复选框"的超文本标记语言元素。

其次，CheckboxFieldGroup用于每组复选框条目，即共享公共名称属性的每一组HTML元素。CheckboxFieldGroup组件根据传入的初始道具创建许多CheckboxField组件。

状态在CheckboxFieldGroup组件中管理，而不是在单个CheckboxField级别。据我所知，您应该将状态管理为有意义的最高级别。对我来说，在CheckboxFieldGroup级别上使用它更有意义。

当CheckboxFieldGroup第一次运行时，它的初始状态将从它的初始道具（也是一个数组）创建为一个数组。render方法（实际上是renderChoices方法）循环遍历其状态数组，并将每个状态成员的属性向下传递给CheckboxField组件作为后者的支柱。当用户勾选/取消勾选其中一个复选框时，该事件通过回调传递给其所有者CheckboxFieldGroup的handleChange方法。此方法通过询问其id属性来确定哪些复选框已更改，然后通过setState（）调用对CheckboxFieldGroup状态数组的正确成员进行相应更改。这将导致CheckboxFieldGroup自动重新渲染，新的状态数组将传递给各个CheckboxField组件，因此所有内容都是同步的。

/** @jsx React.DOM */

var CheckboxField = React.createClass({
    propTypes: {
        values: React.PropTypes.object.isRequired
    },
    getDefaultProps: function () {
        return {
            values: {
                label: "Place holder text"                
            }
        };
    },
    render: function() {
        return (
            <label htlmFor={this.props.values.id}>
                <input type="checkbox"
                    name={this.props.values.name}
                    id={this.props.values.id}
                    value={this.props.values.value}
                    checked={this.props.values.checked}
                    onChange={this.handleChange} />
                {this.props.values.label} <br />
            </label>
        );
    },
    handleChange: function(event) {
        // Should use this to set parent's state via a callback func.  Then the
        // change to the parent's state will generate new props to be passed down
        // to the children in the render().
        this.props.callBackOnChange(this, event.target.checked);
    }
});


var CheckboxFieldGroup = React.createClass({
    propTypes: {
        defaultValues: React.PropTypes.object.isRequired
    },
    getInitialState: function () {
        // default props passed in to CheckboxFieldGroup (this componenent) will be used to set up the state.  State
        // is stored in this component, and *not* in the child CheckboxField components.  The state store in this
        // component will, in turn, generate the props for the child CheckboxField components.  When the latter
        // are updated (i.e. clicked) by the user, then the event will call the handleChange() function in
        // this component.  That will generate update this component's state, which in turn will generate
        // new props for the child CheckboxField components, which will cause those components to re-render!
        var that = this;
        var initStateArray = this.props.defaultValues.valuesArray.map(function(choice, i) {
            var tempObj = {
                name: that.props.defaultValues.name,
                value: choice.value,
                label: choice.label,
                id: _.uniqueId("choice"),
                checked: choice.checked
            };
            return tempObj;
        });
        return {valuesArray: initStateArray};
    },
    renderChoices: function() {
        var that = this; // Could also use .bind(this) on our map() function but that requires IE9+.
        return this.state.valuesArray.map(function(choice, i) {
            return CheckboxField({
                values: {
                    name: that.props.defaultValues.name,
                    value: choice.label,
                    label: choice.label,
                    id: choice.id,
                    checked: choice.checked
                },
                callBackOnChange: that.handleChange
            });
        });
    },
    render: function () {
        return (
            <form>
                {this.renderChoices()}
            </form>
        );
    },
    handleChange: function(componentChanged, newState) {
        // Callback function passed from CheckboxFieldGroup (this component) to each of the
        // CheckboxField child components.  (See renderChoices func).
        var idx = -1;
        var stateMemberToChange = _.find(this.state.valuesArray, function(obj, num) {
            idx = num;
            return obj.id === componentChanged.props.values.id;
        });

        // Threw an error when I tried to update and indiviudal member of the state array/object.  So, take a copy
        // of the state, update the copy and do a setState() on the whole thing.  Using setState() rather than
        // replaceState() should be more efficient here.
        var newStateValuesArray = this.state.valuesArray;
        newStateValuesArray[idx].checked = newState;
        this.setState({valuesArray: newStateValuesArray});  // Automatically triggers render() !!
    },
    getCheckedValues: function() {
        // Get an array of state objects that are checked
        var checkedObjArray = [];
        checkedObjArray = _.filter(this.state.valuesArray, function(obj){
            return obj.checked;
        });

        // Get an array of value properties for the checked objects
        var checkedArray = _.map(checkedObjArray, function(obj){
            return obj.value;
        });
        console.log("CheckboxFieldGroup.getCheckedValues() = " + checkedArray);
    },
    componentDidMount: function() {
        this.getCheckedValues();
    },
    componentDidUpdate: function() {
        this.getCheckedValues();
    }
});


var defaults = {
    name : "mikeyCheck",
    valuesArray : [{
        label : "My Checkbox Field",
        value: "MyCheckboxField",
        checked : false
    }, {
        label : "My Other Checkbox Field",
        value : "MyOtherCheckboxField",
        checked : false
    }, {
        label : "Yet Another Checkbox Field",
        value : "YetAnotherCheckboxField",
        checked : true
    },{
        label : "Yes, it's a fourth checkbox field",
        value : "YesItsAFourthCheckboxField",
        checked : false
    }]
}; 

React.renderComponent(<CheckboxFieldGroup defaultValues={defaults} />, document.getElementById("main"));

这一切都很好，下面是一个正在运行的JSFiddle。

但我觉得我在这里做了很多错事。

1. 实现如此简单的东西似乎需要大量的代码。我的整个方法都被误导了吗
2. 我的CheckboxFieldGroup的状态似乎包含了很多可能不应该存在的内容，例如，它包含名称、值、标签、id和checked，而事实上，它只是最后一个要更改的名称（由用户更改）。那么，这应该是唯一一个在状态和其他道具不知何故？但是我需要id属性处于状态，以便CheckboxFieldGroup。handleChange（）方法可以确定实际更改了哪个复选框。还是有更好/更简单的方法
3. 当我再次在handleChange（）方法中更新CheckboxFieldGroup组件的状态时，我找不到一种方法来直接更新我所需要的状态的一部分，即与刚刚勾选/取消勾选的复选框对应的状态数组元素的checked属性。我最后做的是将状态数组的整个副本复制到另一个变量，在那里更新我的one属性，然后用新数组替换整个状态。即使我使用的是setState（）而不是replaceState（），这难道不是一种浪费吗

事先非常感谢你的帮助。是的，我有谷歌，并且仔细阅读了文档。我还购买并阅读了《开发React Edge》一书，这本书目前在一个领域中排名第一！

Answer 1

对于问题1，我有同样的感觉，当我第一次使用反应来构建我的第一个组件，猜是这样的？哈哈

对于问题2和问题3，我只将选中的保存在状态中，其余信息保留在道具中。然后在处理更新时，我只将某些复选框设置为true/false。

http://jsfiddle.net/p0s58exh/4/

getInitialState: function () {   
  var that = this;
  var states = {};
  _.map(this.props.defaultValues.checkboxes, function (choice, key) {
    states[key] = choice.checked;
  });
  return states;
},

请记住将key添加到子数组元素中，以便反应准确地知道要更新哪个元素。

return _.map(this.props.defaultValues.checkboxes, function (choice, key) {
  return CheckboxField({
    key: key,
    values: {
      name: that.props.defaultValues.name,
      value: key,
      label: choice.label,
      id: choice.id,
      checked: that.state[key]
    },
    callBackOnChange: that.handleChange
  });
});