Reactjs - Manage multiple checkboxes

Question

I am creating a CheckAllBoxes component in Reactjs. I have a list of items

fruits = {orange, apple, grape} 

Generic <SelectBox /> component for displaying and switching HTML code

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

Then I need to build a <SelectAll /> component that has <SelectBox /> , and when it is installed, it will switch all <CheckBox /> to <Fruits />

If any fruit is not removed again, then <SelectAll /> must also be removed.

The result should look something like this:

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

Answer 1

Here is a brief example of how you could do this:

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

I apologize for the ES6 example. I’ll add an ES5 example when I find more time, but I think you can get an idea of ​​how to do this. Also, you definitely want to break it down into 2 components. Then you just pass your parameters as the props for the child component.

Answer 2

I would recommend reading Link between components

Now in your example, you have a relationship between two components that do not have a parent-child relationship. In this case, you can use the global event system. Flux works great with React.

In your example, I would make a FruitStore with a Fruit component that will listen to the repository. FruitStore contains a list with all the fruits and if they are selected or not. Fruit save the contents using setState() .

Fruit transfers to the child their status for props. Example: <CheckBox checked={this.state.fruit.checked} name={this.state.fruit.name}/>

Checkbox should fire when FruitAction.checkCheckbox(fruitName) .

Then FruitStore update the Fruit component, etc.

It will take some time to get into this unidirectional architecture, but it is worth exploring it. Try starting with the Flux Todo List Tutorial .