Reactjs - 控制多个复选框

Question

我在Reactjs中构建一个CheckAllBoxes组件.我有一个项目清单

fruits = {orange, apple, grape}

<SelectBox />显示和切换HTML复选框的常规组件

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

然后我需要构建一个<SelectAll />具有a 的组件,<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示例,但我认为您可以了解如何做到这一点.另外你肯定想把它分解为2个组件.然后,您只需将选项作为道具传递给子组件.