javascript 你如何在 React 中使用子组件实现“全部检查”？

How do you implement "check all" in React with child components?

提问by artburkart

I've found a couple questions on here that sort of answer the question,

我在这里找到了几个问题来回答这个问题，

• select all
• managed state of controlled checkboxes

• 全选
• 受控复选框的管理状态

but they do not allow me to render a component with a checkbox.

但它们不允许我渲染带有复选框的组件。

What I'd like is something like this,

我想要的是这样的

render: function () {
    var rows = [<ChildElement key={1} />, <ChildElement key={2} />];
    return (
    <ParentElement>{rows}</ParentElement>
    );
}

where my ChildElements each have their own check boxes that can be set to checked=trueor checked=falsewhenever a global checkbox is checked or unchecked on the ParentElement.

我的 ChildElements 每个都有自己的复选框，可以设置为checked=true或checked=false每当在 ParentElement 上选中或取消选中全局复选框时。

Any suggestions? Cheers

有什么建议？干杯

回答by securingsincity

I put together a gist for you to try but the basic idea is to maintain the state of the checkboxes in the parent and have a callback in the child that passes up its changed state.

我整理了一个要点供您尝试，但基本思想是维护父项中复选框的状态，并在子项中进行回调以传递其更改后的状态。

http://jsfiddle.net/69z2wepo/4785/

http://jsfiddle.net/69z2wepo/4785/

var Row = React.createClass({
  getInitialState: function() {
    return {
      checked: false
    };
  },
  checkIt: function() {
    this.props.callback(this.props.index, !this.props.checked);
    return;
  },
  render: function() {
    return (
      <tr>
        <td><input type="checkbox" checked={this.props.checked} onChange={this.checkIt} /></td>
        <td>{this.props.obj.foo}</td>
      </tr>
    );
  }
});

var Table = React.createClass({
  getInitialState: function() {
    var rowState =[];
    for(var i = 0; i < this.props.rows.length; i++) {
      rowState[i] = false;
    }
    return {
      checkAll: false,
      rowState:rowState
    };
  },
  checkRow: function (id,value) {
    this.state.rowState[id] = value;
    if (this.state.checkAll) {
      this.state.checkAll = !this.state.checkAll;
    }
    this.setState({
      rowState: this.state.rowState,
      checkAll: this.state.checkAll
    });
  },
  checkAll: function () {
    var rowState =[];
    var checkState = !this.state.checkAll;
    for(var i = 0; i < this.state.rowState.length; i++) {
      rowState[i] = checkState;
    }

    this.state.checkAll = checkState;

    this.setState({
      rowState: rowState,
      checkAll: this.state.checkAll
    });
  },
  render: function() {
    var self = this;

    var rows = _.map(this.props.rows, function( row,index) {
      return (<Row obj={row} index={index} key={row.id} checked={self.state.rowState[index]} callback={self.checkRow} />);
    });
    return (
      <div className="table-holder container">
      <input type="checkbox" checked={this.state.checkAll} onChange={this.checkAll} />
      <table className="table">{rows}</table>
      </div>
    );
  }
});

var rows = [
  {
    'id' : 1,
    'foo': 'bar'
  },
  {
    'id' : 2,
    'foo': 'baarrrr'
  },
  {
    'id' : 3,
    'foo': 'baz'
  }
];

React.render(<Table rows={rows}/>, document.getElementById('container'));