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

 
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" alt=""/>
</div>
</div>
})

猜你喜欢

转载自www.cnblogs.com/liuerpeng/p/10143007.html