React实现全选功能


Posted in Javascript onAugust 25, 2020

本文实例为大家分享了React实现全选功能的具体代码,供大家参考,具体内容如下

1、主要就是使用state状态管理
2、jsx写的时候要多留心,return 的时候最好用一个()包着元素部分,不然有可能编译不过。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script src="./js/react.development.js"></script>
  <script src="./js/react-dom.development.js"></script>
  <script src="./js/babel.min.js"></script>
  <title>全选事件</title>
</head>
<body>
  <div id="root"></div>
</body>
 
<script type="text/babel">
  class Check extends React.Component{
    constructor() {
      super();
      this.state={
        list:[
          {'value':'苹果','checked':false},
          {'value':'橘子','checked':false},
          {'value':'凤梨','checked':false},
          {'value':'菠萝','checked':false},
          {'value':'无花果','checked':false},
          {'value':'火龙果','checked':false},
          {'value':'西瓜','checked':false},
        ],
        isAllChecked:false,
        color:'red',
        opacity:1
      }
    }
    isAllChecked(e){
      let bool = e.target.checked;
      if(bool){
        this.setState({
          isAllChecked : true
        })
        this.state.list.filter((item)=>{
          item.checked = true;
        })
      }else{
        this.setState({
          isAllChecked : false
        });
        this.state.list.filter((item)=>{
          item.checked = false;
        })
      }
      this.setState({
        list:this.state.list
      })
    }
    singleChecked(e,i){
      // i 就是下标
      this.state.list[i.index].checked = e.target.checked;
      this.setState({
        list:this.state.list
      });
      var bool=this.state.list.filter((item)=>{
        return !item.checked;  
      })
      if(bool.length == 0){
        this.setState({
          isAllChecked : true
        })
      }else{
        this.setState({
          isAllChecked : false
        })
      }
    }
    componentDidMount(){
      console.log("挂载完成");
      setInterval(()=>{
        let opa = this.state.opacity;
        opa >=0 ? opa=opa-0.1 : opa=1;
        this.setState({
          opacity:opa
        })
      },500)
    }
    render(){
      return(
        <div style={{'color':'red','fontSize':'20px'}}>
          <header style={{'opacity':this.state.opacity}}>全选练习</header>
          <div style={{'marginLeft':'30px'}}>
            全选 <input type="checkbox" checked={this.state.isAllChecked ? true : false} onChange={(e)=>{this.isAllChecked(e)}} /><br/><br/>
            {
              this.state.list.map((item,index)=>{
                return (
                  <div key={index}>
                   {item.value} <input type="checkbox"  value={item.value} onChange={(e)=>{this.singleChecked(e,{index})}} 
                   checked={item.checked ? true : false} />
                  </div>
                )
              })
            }
          </div>
        </div>
      )
    }
  }
  ReactDOM.render(
    <Check />,
    document.getElementById("root")
  )
 
</script>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS 去前后空格大全(IE9亲测)
Jul 15 Javascript
jquery实现兼容浏览器的图片上传本地预览功能
Oct 14 Javascript
JS字符串截取函数实例
Dec 27 Javascript
javascript中Math.random()使用详解
Apr 15 Javascript
jQuery实现强制cookie过期方法汇总
May 22 Javascript
jquery实现红色竖向多级向右展开的导航菜单效果
Aug 31 Javascript
从零开始学习Node.js系列教程三:图片上传和显示方法示例
Apr 13 Javascript
vue短信验证性能优化如何写入localstorage中
Apr 25 Javascript
Vue自定义弹窗指令的实现代码
Aug 13 Javascript
基于vue2的canvas时钟倒计时组件步骤解析
Nov 05 Javascript
vue 的 solt 子组件过滤过程解析
Sep 07 Javascript
比较node.js和Deno
Apr 27 Javascript
react实现复选框全选和反选组件效果
Aug 25 #Javascript
js实现数字跳动到指定数字
Aug 25 #Javascript
js实现点击选项置顶动画效果
Aug 25 #Javascript
理解JavaScript中的对象
Aug 25 #Javascript
一文秒懂JavaScript构造函数、实例、原型对象以及原型链
Aug 25 #Javascript
node.js基础知识汇总
Aug 25 #Javascript
基于JS实现快速读取TXT文件
Aug 25 #Javascript
You might like
php数字游戏 计算24算法
2012/06/10 PHP
php连接MSsql server的五种方法总结
2018/03/04 PHP
PHP实现数组根据某个单元字段排序操作示例
2018/08/01 PHP
转义字符(\)对JavaScript中JSON.parse的影响概述
2013/07/17 Javascript
javascript获取web应用根目录的方法
2014/02/12 Javascript
jquery delay()介绍及使用指南
2014/09/02 Javascript
jquery控制背景音乐开关与自动播放提示音的方法
2015/02/06 Javascript
js实现楼层效果的简单实例
2016/07/15 Javascript
微信小程序自定义导航隐藏和显示功能
2017/06/13 Javascript
Vue-Access-Control 前端用户权限控制解决方案
2017/12/01 Javascript
详解Require.js与Sea.js的区别
2018/08/05 Javascript
layer弹出的iframe层在执行完毕后关闭当前弹出层的方法
2018/08/17 Javascript
微信小程序下拉刷新PullDownRefresh的使用方法
2018/11/29 Javascript
js实现div色块拖动录制
2020/01/16 Javascript
使用Vant完成Dialog弹框案例
2020/11/11 Javascript
[01:14]英雄,所敬略同——2018完美盛典宣传视频4K
2018/12/05 DOTA
[48:31]完美世界DOTA2联赛PWL S3 DLG vs Phoenix 第二场 12.17
2020/12/19 DOTA
基于进程内通讯的python聊天室实现方法
2015/06/28 Python
python 用lambda函数替换for循环的方法
2018/06/09 Python
在python中只选取列表中某一纵列的方法
2018/11/28 Python
Scrapy框架爬取西刺代理网免费高匿代理的实现代码
2019/02/22 Python
python验证身份证信息实例代码
2019/05/06 Python
python+jinja2实现接口数据批量生成工具
2019/08/28 Python
ubuntu16.04升级Python3.5到Python3.7的方法步骤
2020/08/20 Python
基于CSS3特效之动画:animation的应用
2013/05/09 HTML / CSS
英国领先的大码时装品牌之一:Elvi
2018/08/26 全球购物
银行柜员应聘推荐信范文
2013/11/24 职场文书
高中毕业的自我鉴定
2013/12/09 职场文书
医院实习介绍信
2014/01/12 职场文书
公交公司毕业生求职信
2014/02/15 职场文书
元旦促销方案
2014/03/15 职场文书
2014光棍节单身联谊活动策划书
2014/10/10 职场文书
教师批评与自我批评剖析材料
2014/10/16 职场文书
淮阳太昊陵导游词
2015/02/10 职场文书
餐厅保洁员岗位职责
2015/04/10 职场文书
JavaScript如何优化逻辑判断代码详解
2021/06/08 Javascript