在Taro中实现购物车的单选全选

相信大家在Taro中实现购物车的单选与全选都会有自己的见解，疫情当前，逆战而行，愿我分享的代码能帮助到你更好的来理解：

import Taro, { Component } from '@tarojs/taro'
//组件的首字母一定要大写，小写被当做html标签
import { View, Checkbox, CheckboxGroup } from '@tarojs/components'
import { request } from './../../utils'
import './index.scss'
class Index extends Component {
  constructor (props) {
    super(props)
    this.state = {
      cartlist: [],
      isTrue: true,
      totalNum: 0,
      totalPrice: 0,
      allSelected: true
    }
  }
  componentDidShow () {
    try {
      // 本地判断是否登陆
      let userid = Taro.getStorageSync('userid')
      let token = Taro.getStorageSync('token')
      if ( userid && token) {
        request({
          url: '/cart',
          data: {
            userid,
            token
          }
        }).then( res => {
          console.log(res.data.code)
          if (res.data.code === '10119') {
            Taro.showToast({
              title: '还未登陆，请先登陆',
              icon: 'none'
            })
            Taro.navigateTo({
              url: '/pages/login/index'
            })
          } else if (res.data.code === '10112') {
            Taro.showToast({
              title: '购物车空空如也，请加购',
              icon: 'none'
            })
            this.setState({
              isTrue: true
            })
          } else {
            res.data.data.map( item => {
              item.flag = true
            })
            this.setState({
              isTrue: false,
              cartlist: res.data.data
            }, () => {
              this.count() // 用来计算总价和总数
            })
          }
        })
      } else {
        Taro.showToast({
          title: '还未登陆，请先登陆',
          icon: 'none'
        })
        Taro.navigateTo({
          url: '/pages/login/index'
        })
      }
    } catch (error) {
      
    }
  }
  count () {
    console.log(this.state.cartlist)
    let num = 0
    let price = 0
    this.state.cartlist.map( item => { // 选中才会计算
      item.flag ? num += item.num : num += 0
      item.flag ? price += item.num * item.price : price += 0
    })

    this.setState({
      totalNum: num,
      totalPrice: price
    })
  }
  render () {
    const { cartlist= [] } = this.state
    return (
      <View>
        {
          this.state.isTrue ? <View>购物车空空如也，请加购</View> : <View>
            <CheckboxGroup onChange={
              (event) => {
                console.log(event.detail)
                // 获取长度  表明是否被选中
                let len = event.detail.value.length
                console.log(len)
                // 通过长度获取到 选中和不选中变量
                let flag = len === 1 ? true : false
                // 获取列表数据
                let list = this.state.cartlist
                // 处理数据
                list.map(item => {
                  flag ? item.flag = true : item.flag = false
                })
                // 修改状态
                this.setState({
                  allSelected: flag,
                  cartlist: list
                }, () => { // 计算总价和总数
                  this.count()
                })
              }
            }>
              <Checkbox checked={ this.state.allSelected } />全选
            </CheckboxGroup>
            {
              cartlist.map((item, index) => {
                return (
                  <View key={ item.proid }>
                  <CheckboxGroup onChange={
                    (event) => {
                      // console.log(event.detail.value)
                      // 根据选中的数组的长度判断是否被选中
                      let len = event.detail.value.length
                      // console.log(len)
                      // console.log('index', index)
                      // 设置标识 表明当前的这个是不是被选中
                      let flag = len === 1 ? true : false
                      // 获取数据 准备处理以及修改数据用
                      let list = this.state.cartlist
                      // list[index].flag = flag
                      console.log('flag', flag)
                      // 如果当前的数据被选中
                      if (flag === true) {
                        // console.log('111', list[index].flag)
                        // 处理当前的数据源中的标识为选中状态
                        list[index].flag = true
                        // 检测其他的选项是否都是选中状态
                        let test = list.every(val => {
                          console.log('val', val.flag)
                          return val.flag === true
                        })
                        // console.log('test', test)
                        // 如果都被选中
                        if (test) {
                          // 全选设置为选中状态，更新状态，计算总价总数
                          this.setState({
                            allSelected: true,
                            cartlist: list
                          }, () => {
                            this.count()
                          })
                        } else {
                          // 其余项有没被选中，更新状态，计算总价总数
                          this.setState({
                            allSelected: false,
                            cartlist: list
                          }, () => {
                            this.count()
                          })
                        }
                      } else {
                        // 点击当前未被选中，需要将当前的数据值为 false
                        list[index].flag = false
                        // 更新状态，计算总价总数
                        this.setState({
                          allSelected: false,
                          cartlist: list
                        }, () => {
                          this.count()
                        })
                      }
                    }
                  }>
                    <Checkbox checked={item.flag}/>
                  </CheckboxGroup>
                  
                  { item.proname } - { item.price } - 
                  ...
                  </View>
                )
              })
            }
            <View>
              总数： { this.state.totalNum }
            </View>
            <View>
              总价： { this.state.totalPrice }
            </View>
          </View>
        }
      </View>
    )
  }
}

export default Index