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>
    })
  • 相关阅读:
    省市县 三级 四级联动Javascript JQ 插件PCASClass.js
    【转】提高PHP性能的53个技巧
    Windows下Wamp装不上Memcache扩展
    Weui 微信网站开发样式插件使用教程
    div高度自适应填充剩余部分
    Storm简介
    Spark简介
    MapReduce的输入输出
    MapReduce 2简介
    Hadoop的I/O操作
  • 原文地址:https://www.cnblogs.com/liuerpeng/p/10143007.html
Copyright © 2011-2022 走看看