javascript - react 输入复选框选择所有组件

Question

我正在尝试构建一个正确的 react 输入复选框选择所有组件。这个想法是有一个组件 <InputCheckboxAll>和 <InputCheckbox>我将能够检查 <InputCheckboxAll>和所有 <InputCheckbox>也会被选中。

我有两个问题。

• 如果<InputCheckboxAll>已选中 我无法取消选择任何 <InputCheckbox> .
• 如果所有 <InputCheckbox>然后检查<InputCheckboxAll>应该检查。

Here's the example.

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复选框类，以及 allChecked InputCheckbox 的 Prop 类(class)。复选框是一个相对笨拙的元素，它不应该知道 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 中绑定(bind)到自己的数据大批。当 <Inputcheckbox>更改时，我们将索引绑定(bind)到更改处理程序，因此我们知道要修改哪个数组元素。

  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 的每个元素为真。

这还有一个好处，就是当您手动选中所有复选框时，全选复选框会自动选中。

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