样式代码：
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 } } |
