反应输入复选框选择所有组件 [英] React input checkbox select all component

问题描述

我正在尝试构建适当的react input复选框以选择所有组件.这个想法是，有一个组件< InputCheckboxAll> 和< InputCheckbox> ，我可以检查< InputCheckboxAll> ，并且所有< InputCheckbox> 也会被选中.

I'm trying to build a proper react input checkbox select all component. The idea is that there is a component <InputCheckboxAll> and <InputCheckbox> and I'd be able to check the <InputCheckboxAll> and all of the <InputCheckbox> would be selected as well.

我有两个问题.

• 如果选中了< InputCheckboxAll> ，则无法取消选择任何< InputCheckbox> .
• 如果选中了所有< InputCheckbox> ，则应选中< InputCheckboxAll> .

• If <InputCheckboxAll> is checked I can't unselect any of the <InputCheckbox>.
• If all of the <InputCheckbox> are checked then <InputCheckboxAll> should be checked.

这是示例.

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)

推荐答案

我认为可能需要对您的实现进行一些修改，以便以更多的 React'esque 形式获得所需的结果.

I think there could be some modifications to your implementation to achieve the desired results in a more React'esque form.

首先要摆脱的是 InputCheckboxAll 复选框类和 InputCheckbox 类的 allChecked 道具.复选框是一个相对愚蠢的元素，它不应该了解诸如选择所有内容之类的概念.

What you should get rid of first, is the InputCheckboxAll checkbox class, and the allChecked prop of the InputCheckbox class. A checkbox is a relatively dumb element, it should not know about concepts such as Everything is selected.

相反，应将复选框实现为仅被选中或未选中的项目.

Instead, the checkbox should be implemented as an item that is simply either checked or unchecked.

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

应从主应用程序管理应用程序的状态(如所有选定的之类的概念)，使较低级别的元素保持无状态.主应用程序的状态可以简单地表示每个复选框的已检查状态:

The state of your app (concepts such as All Selected) should be managed from the main App, keeping lower level elements stateless. The state of the main app can simply represent the checked status of each of your checkboxes:

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

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

Now, you can recreate the render function to draw 3 checkboxes, plus your select all checkbox. Each <InputCheckbox> can be binded to its own data in the this.state.checked array. When the <Inputcheckbox> changes, we bind an index to the change handler, so we know which array element to modify.

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

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

You don't need to store any state related to All Selected. Instead, it would be better to recalculate if everything is selected or not during every render. When the Select All checkbox is checked, we simply set every element of this.state.checked to true.

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

This also has the advantage of when you manually select all the checkboxes, the select all checkbox will check itself.

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

这篇关于反应输入复选框选择所有组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！