使用React class component(类组件）实现购物车复选框全选/全不选功能

 在React中我们经常会使用到类组件去实现功能，经常会遇到如下图类似的全选/全不选，本人做了一些小结如下

  

需求：

1：当全选按钮处于选择状态，所有子项按钮也是处于选择状态，反之，当全选按钮处于未选中状态，所有子项也都处于未选中状态。

 

2：当子项所有按钮全部选中时，全选按钮也会随之自动选中，如果子项有一个没有被选中，全选按钮就不会被选中。

实现：

import React, { Component } from 'react'
import './App.css'
export default class App extends Component {
    // 初始化状态
    state = {
        data: [],//存放数据
        allchecked: false//全选按钮的状态
    }

    componentDidMount() {
        // data 为模拟后端传输的数据
        this.setState({
            data: [{ id: 1, name: '苹果' },
            { id: 2, name: '菠萝' },
            {