React.js-控制多个复选框 [英] Reactjs - Controlling Multiple Checkboxes

问题描述

我在Reactjs中构建一个CheckAllBoxes组件。我有一个项目列表

Im building a CheckAllBoxes component in Reactjs. I have a list of items

fruits = {orange, apple, grape}

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

A general <SelectBox /> component to display and toggle the HTML checkbox

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

I need to build a <Fruits /> component to list all the fruits and each of item has its own <SelectBox />

然后我需要构建一个< SelectAll /> ; 组件，该组件具有< SelectBox /> ，并且在选中该组件时，它将切换所有< CheckBox /> of < Fruits />

Then I need to build a <SelectAll /> component which has a <SelectBox /> and when it is checked, it will toggle all the <CheckBox /> of <Fruits />

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

If any fruit is unchecked again, then the <SelectAll /> should be unchecked too.

结果应类似于

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

How can I get the <SelectAll /> to control other checkboxes ?

推荐答案

以下是有关如何实现的简单示例：

Here is the quick example on how you could do it:

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个部分。然后，您只需将您的选择作为道具传递给Child组件即可。

I'm sorry for the ES6 example. Will add ES5 example when I find more time, but I think you can get the idea on how to do it. Also you definitely want to break this down into 2 components. Then you would just pass your options as props to the Child component.

这篇关于React.js-控制多个复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！