React 中购物车功能实现(全选多选功能实现)

样式代码：

import React, {
    Component } from 'react'
import "./Page.css"
export default class Page extends Component {
   
  state = {
   
    arr: [
      {
    id: 1, goodName: '杨枝甘露', goodPrice: 20 },
      {
    id: 2, goodName: '森林玫果', goodPrice: 30 },
      {
    id: 3, goodName: '烤奶', goodPrice: 15 }
    ],
allChecked: false
  }
  checkNum = 0
  render() {
   
    const {
    arr } = this.state;
    return (
      <div className='Box'>
        <li>
          <input type="checkbox" style={
   {
   marginRight: '10px'}} checked = {
   this.state.allChecked} onChange={
   this.allChose}/>全选
        </li>
        {
   
          arr.map(e =>
            <li key={
   e.id}>
              <input type="checkbox" style={
   {
   marginRight: '10px'}} checked={
   false || e.checked} onChange={
   (event) =>this.itemChange(event,e)}/>
              <span>{
   `商品名称：${
     e.goodName}`}</span>
              <span>{
   `单价：${
     e.goodPrice}`}</span>
              <button>-</button>
              <input type="text" className='num_box'/>
              <button>+</button>
            </li>
          )
        }
        <div className='foot'>
          <p  style={
   {
   fontSize: '18px',textAlign: 'right'}}>结算： ￥169</p>
        </div>
      </div>
    )
  }
}

实现全选多选的功能：
我的实现思路是：
1、在state状态中添加一个属性用来控制全选按钮的状态值 针对单选 我们设置计数器checkNum
2、对单选框设置对应的方法 当点击对应的单选按钮后 将true||false的状态值赋值给对应的对象属性中(即添加checked属性到点击的对应对象中) ，同时若为true则计数器累加，否则递减 当计数器的值等于state中数组的长度的时候，更新state状态中的allChecked属性为true

itemChange = (event,e)=>{
   
    const checked = event.target.checked;
    const {
   arr} = this.state;
    e.checked = checked;
    if(checked){
   
      this.checkNum ++;
    }else{
   
      this.checkNum --;
    }
    if(this.checkNum === arr.length){
   
      this.setState({
   
        allChecked: true
      })
    }else{
   
      this.setState({
   
        allChecked: false
      })
    }
  }

3、此时我们单选按钮与全选按钮就已经有了单向的联系，那么我们怎么去控制全选按钮呢？显而易见，我们对全选设置函数，若点击选中后，将true的状态更新到state中的allChecked中，否则将false更新到对应的状态中

allChose = e => {
   
    const checked = e.target.checked;
    const {
   arr} = this.state;
    this.setState({
   
      allChecked: checked
    })
    arr.map(e => e.checked = checked)
    this.setState({
   
      arr
    })
}

4、全选和单选的效果已经初步完成 但是会存在缺陷bug 就是当我们点击全选按钮后 并没有针对checkNum进行处理 会导致bug的出现，解决方法：在全选执行的函数中对true||false进行判断，更新checkNum的值(初始化)

allChose = e => {
   
    const checked = e.target.checked;
    const {
   arr} = this.state;
    this.setState({
   
      allChecked: checked
    })
    arr.map(e => e.checked = checked)

    this.setState({
   
      arr
    })
    if(checked){
   
      this.checkNum = arr.length;
    }else{
   
      this.checkNum = 0
    }
  }