阿狗工具

样式代码：

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