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