反应输入复选框选择所有组件

Question

我试图建立一个适当的反应输入复选框，选择所有组件。想法是有一个组件<InputCheckboxAll>，<InputCheckbox>并且我可以检查<InputCheckboxAll>，所有组件也都<InputCheckbox>将被选中。

我有两个问题。

• 如果<InputCheckboxAll>选中，则无法取消选择任何一个<InputCheckbox>。
• 如果已全部<InputCheckbox>选中，<InputCheckboxAll>则应进行检查。

这是例子。

var InputCheckboxAll = React.createClass({
  handleChange: function (event) {
    this.props.handleChange(event)
  },
  render: function () {
    return (
    <input
           type='checkbox'
           {...this.props}
           onChange={this.handleChange} />
    )
  }
})

var InputCheckbox = React.createClass({
  getInitialState: function () {
    return {
      checked: this.props.checked
    }
  },
  render: function () {
    var checkedValue = this.props.allChecked ? true : this.state.checked
    return (
    <input
           checked={checkedValue}
           type='checkbox'
           {...this.props}/>
    )
  }
})

var Test = React.createClass({
  getInitialState: function () { return {allChecked: false}; },
  handleChange: function (event) {
    var $elm = $(event.target)
    var checked = $elm.prop('checked')
    this.setState({
      allChecked: checked
    })
  },
  render: function () {
    return (
    <div>
      Select All: <InputCheckboxAll handleChange={this.handleChange}/><br/>
      <InputCheckbox allChecked={this.state.allChecked}/><br/>
      <InputCheckbox allChecked={this.state.allChecked}/><br/>
      <InputCheckbox allChecked={this.state.allChecked}/><br/>
    </div>
    )
  }
})

React.render(<Test/>, document.body)

Answer 1

我认为可能会对您的实现进行一些修改，以便以更具 React风格的 形式获得所需的结果。

首先要取消的是InputCheckboxAll复选框类和该类的allCheckedprop
InputCheckbox。复选框是一个相对愚蠢的元素，它不应该了解诸如之类的概念Everything is selected。

取而代之的是，应将复选框实现为简单 选中 或未 选中的项目 。

var InputCheckbox = React.createClass({
  getDefaultProps: function () {
    return {
      checked: false
    }
  },
  render: function () {
    return (
    <input
           checked={this.props.checked}
           type='checkbox'
           {...this.props}/>
    )
  }
})

您应从主应用程序管理应用程序的状态（如“ 所有选定项”之类的 概念），使较低级别的元素保持无状态。主应用程序的状态可以简单地表示每个复选框的 选中
状态：

  getInitialState: function () { 
      return {
        // 3 checkboxes, all initialized as unchecked
        checked: [false, false, false]
      }; 
  },

现在，您可以重新创建渲染功能以绘制3个复选框，以及您选择的所有复选框。每个数组都<InputCheckbox>可以绑定到自己的数据this.state.checked。当<Inputcheckbox>更改时，我们将索引绑定到更改处理程序，因此我们知道要修改哪个数组元素。

  render: function () {
    // Recalculate if everything is checked each render, instead of storing it
    var isAllChecked = this.state.checked.filter(function(c) {
        return c;
    }).length === this.state.checked.length;

    return (
    <div>
      Select All: <InputCheckbox 
               onChange={this.selectAll} 
               checked={isAllChecked}/><br/>

      <InputCheckbox 
               checked={this.state.checked[0]} 
               onChange={this.handleChange.bind(this, 0)}/><br/>
      <InputCheckbox 
               checked={this.state.checked[1]} 
               onChange={this.handleChange.bind(this, 1)}/><br/>
      <InputCheckbox 
               checked={this.state.checked[2]} 
               onChange={this.handleChange.bind(this, 2)}/><br/>
    </div>
    )
  }

您不需要存储与 All Selected 相关的任何状态。相反，最好在每个渲染期间重新计算是否选择了所有内容。Select All选中此复选框后，我们只需将的每个元素设置this.state.checked为true。

这还具有以下优点：当您手动选择所有复选框时，全选复选框将自行检查。

这是一个示例实现：https :
//jsfiddle.net/rsupvxry/