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 相关文章推荐
javascript页面加载完执行事件代码
Feb 11 Javascript
函数式 JavaScript(一)简介
Jul 07 Javascript
JavaScript实现动画打开半透明提示层的方法
Apr 21 Javascript
jQuery on()方法示例及jquery on()方法的优点
Aug 27 Javascript
JS实现图片平面旋转的方法
Mar 01 Javascript
JS中使用变量保存arguments对象的方法
Jun 03 Javascript
JS实现的按钮点击颜色切换功能示例
Oct 19 Javascript
使用ionic(选项卡栏tab) icon(图标) ionic上拉菜单(ActionSheet) 实现通讯录界面切换实例代码
Oct 20 Javascript
使用Bootstrap + Vue.js实现表格的动态展示、新增和删除功能
Nov 27 Javascript
利用Javascript实现一套自定义事件机制
Dec 14 Javascript
JQuery Ajax跨域调用和非跨域调用问题实例分析
Apr 16 jQuery
webpack3.0升级4.0的方法步骤
Apr 02 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 echo()和print()、require()和include()函数区别说明
2010/03/27 PHP
PHP实现的迷你漂流瓶
2015/07/29 PHP
php curl中gzip的压缩性能测试实例分析
2016/11/08 PHP
jquery showModelDialog的使用方法示例详解
2013/11/19 Javascript
理解JavaScript的变量的入门教程
2015/07/07 Javascript
基于PHP和Mysql相结合使用jqGrid读取数据并显示
2015/12/02 Javascript
限制只能输入数字的实现代码
2016/05/16 Javascript
第一篇初识bootstrap
2016/06/21 Javascript
promise处理多个相互依赖的异步请求(实例讲解)
2017/08/03 Javascript
判断滚动条滑到底部触发事件(实例讲解)
2017/11/15 Javascript
利用Angular2 + Ionic3开发IOS应用实例教程
2018/01/15 Javascript
vue自定义移动端touch事件之点击、滑动、长按事件
2018/07/10 Javascript
Javascript 实现 Excel 导入生成图表功能
2018/10/22 Javascript
Python基于ThreadingTCPServer创建多线程代理的方法示例
2018/01/11 Python
Django框架模板介绍
2019/01/15 Python
PyQt5 在label显示的图片中绘制矩形的方法
2019/06/17 Python
Python+Selenium+phantomjs实现网页模拟登录和截图功能(windows环境)
2019/12/11 Python
Python 存取npy格式数据实例
2020/07/01 Python
CSS3中颜色线性渐变实战
2015/07/18 HTML / CSS
CSS3绘制不规则图形的一些方法示例
2015/11/07 HTML / CSS
让IE下支持Html5的placeholder属性的插件
2014/09/02 HTML / CSS
台湾旅游网站:雄狮旅游网
2017/08/16 全球购物
size?丹麦官网:英国伦敦的球鞋精品店
2019/04/15 全球购物
绩效专员岗位职责
2013/12/02 职场文书
甲方资料员岗位职责
2013/12/13 职场文书
劳动模范事迹材料
2014/01/19 职场文书
咖啡馆创业计划书
2014/01/26 职场文书
学生喝酒检讨书
2014/02/06 职场文书
原材料检验岗位职责
2014/03/15 职场文书
学校招生宣传广告词
2014/03/19 职场文书
售后服务承诺书模板
2014/05/21 职场文书
社区平安建设汇报材料
2014/08/14 职场文书
2014年财务工作总结范文
2014/11/11 职场文书
党员发展大会主持词
2015/07/03 职场文书
党员公开承诺书2016
2016/03/24 职场文书
django上传文件的三种方式
2021/04/29 Python