reactJs中的全选/取消全选复选框

Question

我正在尝试在 reactJs 中实现选择/取消选择所有功能，但无法实现。

我已使选择/取消选择所有主标题复选框功能，并且单个元素也可以选择或取消选择。

我的工作链接：

import React, { Component } from 'react'
import ReactDOM from 'react-dom'

class Box extends Component{
    constructor(props){
        super(props);
        this.state = {
            allChecked: false,
            list: [
                {id:1, name: "item1", isChecked: false},
                {id:2, name: "item2", isChecked: false},
                {id:3, name: "item3", isChecked: false},
            ],
        };
    }

handleChange = (e) => {
    let list =  this.state.list;
    let allChecked = this.state.allChecked;
    if(e.target.value === "checkAll"){
        list.forEach(item => {
            item.isChecked = e.target.checked;
            allChecked = e.target.checked;
        });
    }
    else{
        list.find( item => item.name === e.target.name).isChecked = e.target.checked;
    }
    this.setState({list:list, allChecked: allChecked});
}

renderList = () => {
    return this.state.list.map(item =>
        <div>
            <input key={item.id} type="checkbox" name={item.name} value={item.name} checked={item.isChecked} onChange={this.handleChange} />
            <label>{item.name}</label>
        </div>
    )
}
render(){
    return(
        <div>
            <input type="checkbox" 
            value="checkAll" 
            checked={this.state.allChecked} 
            onChange={this.handleChange} />Check all
            <br/>
            {this.renderList()}
        </div>
    );
  }
}

ReactDOM.render(<Box/>, document.getElementById('root'));

直截了当，我希望这种 (https://jsfiddle.net/52uny55w/) 类型的功能使用纯 Javascript，但由于某些原因不使用 jquery。

Answer 1

我已经在https://codesandbox.io/s/vvxpny4xq3解决了这个问题

  handleChange = e => {
    let itemName = e.target.name;
    let checked = e.target.checked;
    this.setState(prevState => {
      let { list, allChecked } = prevState;
      if (itemName === "checkAll") {
        allChecked = checked;
        list = list.map(item => ({ ...item, isChecked: checked }));
      } else {
        list = list.map(item =>
          item.name === itemName ? { ...item, isChecked: checked } : item
        );
        allChecked = list.every(item => item.isChecked);
      }
      return { list, allChecked };
    });
  };

有几点需要注意。

1) 我已将 checkAll 按钮更新为具有 name 属性以确保一致性

2) 如果修改现有状态，使用新的函数式语法

3) 解构对象，如果可能的话不要在原地改变它们。您可以使用 map 代替 forEach 并使用扩展运算符来修改对象而不发生变异。