全选，取消，单选拼接ID

 本案例是在react项目实战中使用的，需求是把选中的列表项的id以“,”号拼接作为参数，修改状态。后台给的是数据列表，并没有可供是否选中的参数作为判断依据。这就需要前端多相关的数据处理。

 

案例分析

1，首先需要对后台数据保存本地，遍历添加一个checket=false属性,因为开始是未选中状态。

 // 数据解析
    set_awardData(arr){
        arr.forEach(element => {
           
                element.checket = false; 
            
        }); 
        return arr
    }

2，需要一个全选按钮，组需要一个全局checkets=false ，然后还需要声明一个awardData:[]  数组，把后台数据保存本地。

 this.state={  
     awardData:[],     //请求保存本地data数据    
     checkets:false,   // 全选状态对象
 }

 3，需要通过全选按钮改变列表是数据的选中状态，注意此处运用到深拷贝，本案例深拷贝函数放在工具文件util.js 文件里面，这里直接引用了。

// 全选、取消
   All_election(){
    let data = Util.deepCopy(this.state.dataList) 
    if(this.state.checkets===false){
        this.setState({
          dataList:this.set_awardData(data,false),
            checkets:true
        },()=>{
            this.set_pushId()
        })
    }else{
        this.setState({
          dataList:this.set_awardData(data,true),
            checkets:false
        },()=>{
            this.set_pushId()
        })
      }
    }

 深拷贝：这里你也可以吧这个函数放在你当前文件直接引用，但建议放到工具文件中，可以全局统一调用。

// 深拷贝
function deepCopy(obj) {
  var result = Array.isArray(obj) ? [] : {};
  for (var key in obj) {
    if (obj.hasOwnProperty(key)) {
      if (typeof obj[key] === 'object' && obj[key]!==null) {
        result[key] = deepCopy(obj[key]);   //递归复制
      } else {
        result[key] = obj[key];
      }
    }
  }
  return result;
}

4，单个列表的选中，取消，这里是根据下标index  改变checket 的值

// 单选、取消
    option_election(index){
      let data = Util.deepCopy(this.state.dataList)
      data[index].checket = !data[index].checket;
      this.setState({
        dataList:data
      },()=>{
          this.set_pushId()
      })
  }

 5，到这里你会发现，一直在调用set_pushID（）函数，对这就是凭借id的函数

// 推送id拼接
  set_pushId(){
      let data = Util.deepCopy(this.state.dataList);
      let isPush = []
      data.forEach(element=>{
          if(element.checket == true){
              isPush.push(element.account)
          }
      })
      return isPush.join(',')
  }

 好了，这个功能就实现了，下面是全部代码，但是别忘了，要加上深拷贝的函数。

// 数据解析
    set_awardData(arr){
        arr.forEach(element => {
               element.checket = false; 
        }); 
        return arr
    }
// 全选、取消
    All_election(){
        let data = Util.deepCopy(this.state.awardData) 
        if(this.state.checkets===false){
            this.setState({
                awardData:this.set_awardData(data,false),
                checkets:true
            },()=>{
                // console.log(this.state.awardData)
                this.set_pushId()
            })
        }else{
            this.setState({
                awardData:this.set_awardData(data,true),
                checkets:false
            },()=>{
                // console.log(this.state.awardData)
                this.set_pushId()
            })
        }
    }
    // 单选、取消
    option_election(index){
        // console.log(index)
        let data = Util.deepCopy(this.state.awardData)
        data[index].checket = !data[index].checket;
        this.setState({
            awardData:data
        },()=>{
            this.set_pushId()
        })
    }
    // 推送id拼接
    set_pushId(){
        let data = Util.deepCopy(this.state.awardData);
        let isPush = []
        data.forEach(element=>{
            if(element.checket == true){
                isPush.push(element.matchId)
            }
        })
        return isPush.join(',')
    }