react 实现列表选择，在此点击取消

Posted 2021-01-28 liuerpeng

handeSecondQuestionOptions(item){//处理第二题
  console.log(item.id)
  if(!this.state.data.includes(item.id)){
    console.log("没有包含当前的对象")
    this.state.data.push(item.id)
    this.state.dataList.push(item)
    if(this.state.dataList.length<=5 ){
      this.setState({
        data:this.state.data,
        dataList:this.state.dataList
      })
    }else{
      this.state.data.pop(item.id)
      this.state.dataList.pop(item)
      console.log("只能选择3项")
      console.log(this.state.data)

    }
    console.log(this.state.data)
    console.log(this.state.dataList)
  }else{
    console.log("包含当前的对象")
    if(this.state.dataList.length<=5 ){
      this.setState({
        data:this.state.data.filter((items)=>{
          return items!=item.id
        }),
        dataList:this.state.dataList.filter((items)=>{
          return items.id!=item.id
        })
      },()=>{
        console.log(this.state.data)
        console.log(this.state.dataList)
      })

    }else{
      this.state.data.pop(item.id)
      this.state.dataList.pop(item)
      console.log("只能选择5项")
      console.log(this.state.data)
    }
  }


}

secondQuestionArr.map((item)=>{
  return  <div className={styles.secondQuestionOptions} onClick={this.handeSecondQuestionOptions.bind(this,item)} key={item.id}>
            <div className={styles.secondQuestionOptionsIcon +(this.state.data.includes(item.id) ?(" "+styles.showSecondQuestionOptionsIcon):‘‘)}>
              <img src="http://assets.cdn.51zouchuqu.com/single-page/ceyice/test11.png" />
            </div>
  </div>
})