Reactjs - Kiểm soát nhiều hộp kiểm

Question

Im xây dựng thành phần CheckAllBoxes trong Reactjs. Tôi có một danh sách các mục

fruits = {orange, apple, grape} 

Một vị tướng <SelectBox /> thành phần để hiển thị và chuyển vào hộp kiểm HTML

tôi cần phải xây dựng một thành phần <Fruits /> để liệt kê tất cả các loại trái cây và mỗi mặt hàng có riêng của mình <SelectBox />

Sau đó, tôi cần phải xây dựng một thành phần <SelectAll /> trong đó có một <SelectBox /> và khi nó được chọn, nó sẽ chuyển đổi tất cả các <CheckBox /> của <Fruits />

Nếu bất kỳ loại trái cây nào được bỏ chọn một lần nữa, thì cũng nên bỏ chọn <SelectAll />.

Kết quả sẽ giống như thế này:

Làm thế nào tôi có thể nhận được <SelectAll /> để kiểm soát hộp kiểm khác?

Answer 1

tôi sẽ khuyên bạn nên đọc Communication between Components

Bây giờ trong ví dụ của bạn, bạn có một giao tiếp giữa hai thành phần mà không có một mối quan hệ cha-con. Trong trường hợp này, bạn có thể sử dụng hệ thống sự kiện toàn cầu. Flux hoạt động tốt với React.

Trong ví dụ của bạn, tôi sẽ tạo FruitStore với thành phần Fruit nghe lưu trữ. Các FruitStore chứa một danh sách với tất cả các loại trái cây và nếu chúng được chọn hay không. Fruit sẽ lưu nội dung của nó bằng setState().

Fruit chuyển cho trẻ em là trạng thái của chúng trên mỗi đạo cụ. ví dụ: <CheckBox checked={this.state.fruit.checked} name={this.state.fruit.name}/>

Checkbox sẽ kích hoạt khi được nhấp vào FruitAction.checkCheckbox(fruitName).

Sau đó, FruitStore sẽ cập nhật thành phần Fruit v.v.

Mất chút thời gian để đi vào kiến ​​trúc một chiều này, nhưng đáng để học nó. Hãy thử bắt đầu với số Flux Todo List Tutorial.

Answer 2

Dưới đây là ví dụ nhanh về cách bạn có thể làm điều đó:

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

Tôi xin lỗi vì ví dụ ES6. Sẽ thêm ví dụ ES5 khi tôi tìm thêm thời gian, nhưng tôi nghĩ bạn có thể có ý tưởng về cách thực hiện. Ngoài ra, bạn chắc chắn muốn chia nhỏ thành 2 thành phần. Sau đó, bạn sẽ chỉ chuyển các tùy chọn của bạn làm đạo cụ cho thành phần Child.