checkbox - Reactjs - 控制多个复选框

Question

我正在 Reactjs 中构建一个 CheckAllBoxes 组件。我有一个项目 list

fruits = {orange, apple, grape}

将军<SelectBox />用于显示和切换 HTML 复选框的组件

我需要构建一个<Fruits />列出所有水果的组件，每个项目都有自己的 <SelectBox />

然后我需要构建一个<SelectAll />具有 <SelectBox /> 的组件当它被选中时，它将切换所有 <CheckBox />的<Fruits />

如果再次取消选中任何水果，则<SelectAll />也应该取消选中。

结果应该是这样的:

如何获得 <SelectAll />控制其他复选框？

Answer 1

以下是有关如何执行此操作的快速示例:

import React, { Component } from 'react';

export default class SelectBox extends Component {
  constructor() {
    super();

    this.handleClick = this.handleClick.bind(this);
    this.state = {
      allChecked: false,
      checkedCount: 0,
      options: [
        { value: 'selectAll', text: 'Select All' },
        { value: 'orange', text: 'Orange' },
        { value: 'apple', text: 'Apple' },
        { value: 'grape', text: 'Grape' }
      ]
    };
  }

  handleClick(e) {
    let clickedValue = e.target.value;

    if (clickedValue === 'selectAll' && this.refs.selectAll.getDOMNode().checked) {
      for (let i = 1; i < this.state.options.length; i++) {
        let value = this.state.options[i].value;
        this.refs[value].getDOMNode().checked = true;
      }
      this.setState({
        checkedCount: this.state.options.length - 1
      });

    } else if (clickedValue === 'selectAll' && !this.refs.selectAll.getDOMNode().checked) {
      for (let i = 1; i < this.state.options.length; i++) {
        let value = this.state.options[i].value;
        this.refs[value].getDOMNode().checked = false;
      }
      this.setState({
        checkedCount: 0
      });
    }

    if (clickedValue !== 'selectAll' && this.refs[clickedValue].getDOMNode().checked) {
      this.setState({
        checkedCount: this.state.checkedCount + 1
      });
    } else if (clickedValue !== 'selectAll' && !this.refs[clickedValue].getDOMNode().checked) {
      this.setState({
        checkedCount: this.state.checkedCount - 1
      });
    }
  }

  render() {
    console.log('Selected boxes: ', this.state.checkedCount);

    const options = this.state.options.map(option => {
      return (
        <input onClick={this.handleClick} type='checkbox' name={option.value} key={option.value}
               value={option.value} ref={option.value} > {option.text} </input>
      );
    });


    return (
      <div className='SelectBox'>
        <form>
          {options}
        </form>
      </div>
    );
  }
}

对于 ES6 示例，我感到很抱歉。当我有更多时间时会添加 ES5 示例，但我认为您可以了解如何做到这一点。 另外，您肯定想将其分解为两个部分。然后，您只需将选项作为 Prop 传递给子组件即可。