zoukankan      html  css  js  c++  java
  • 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>
    })
  • 相关阅读:
    手机市场价格尚待规范
    Hotmail的2G邮箱被收回,只剩250M了
    网格50题(zz)
    Wallop介绍
    Hotmail邮箱居然还有2G
    IE 7.0抛弃Win2000用户?(zz)
    祝各位Blogger新春快乐!
    Gmail Invitation
    A CS Research Topic Generator(zz)
    今天"做大岁"
  • 原文地址:https://www.cnblogs.com/liuerpeng/p/10143007.html
Copyright © 2011-2022 走看看