这篇博客介绍如何在React应用中动态管理列表的选择状态。通过`handleSecondQuestionOptions`函数，根据当前选中项ID与state进行比较，实现添加或移除选择项，并限制最多选择5项。在选择超过限制时，会自动取消最后添加的一项。
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
})
1598
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
