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 相关文章推荐
使用jQuery设置disabled属性与移除disabled属性
Aug 21 Javascript
Javascript MVC框架Backbone.js详解
Sep 18 Javascript
jquery加载图片时以淡入方式显示的方法
Jan 14 Javascript
轻量级网页遮罩层jQuery插件用法实例
Jul 31 Javascript
Jquery 全选反选实例代码
Nov 19 Javascript
JS获取时间的相关函数及时间戳与时间日期之间的转换
Feb 04 Javascript
D3.js实现折线图的方法详解
Sep 21 Javascript
vue bootstrap小例子一枚
Jun 09 Javascript
解决vue-cli + webpack 新建项目出错的问题
Mar 20 Javascript
微信小程序生成分享海报方法(附带二维码生成)
Mar 29 Javascript
vue 调用 RESTful风格接口操作
Aug 11 Javascript
Vue指令实现OutClick的示例
Nov 16 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魔术方法的使用示例
2015/06/23 PHP
laravel框架添加数据,显示数据,返回成功值的方法
2019/10/11 PHP
PHP使用gearman进行异步的邮件或短信发送操作详解
2020/02/27 PHP
iis6+javascript Add an Extension File
2007/06/13 Javascript
用jquery生成二级菜单的实例代码
2013/06/24 Javascript
浅析jQuery中调用ajax方法时在不同浏览器中遇到的问题
2014/06/11 Javascript
JavaScript中的Repaint和Reflow用法详解
2015/07/27 Javascript
jQuery EasyUI中DataGird动态生成列的方法
2016/04/05 Javascript
JS闭包、作用域链、垃圾回收、内存泄露相关知识小结
2016/05/16 Javascript
纯前端JavaScript实现Excel IO案例分享
2016/08/26 Javascript
表单input项使用label同时引用Bootstrap库导致input点击效果区增大问题
2016/10/11 Javascript
JavaScript、C# URL编码、解码总结
2017/01/21 Javascript
详解extract-text-webpack-plugin 的使用及安装
2018/06/12 Javascript
原生JS实现动态添加新元素、删除元素方法
2019/05/05 Javascript
js脚本中执行java后台代码方法解析
2019/10/11 Javascript
js实现图片跟随鼠标移动效果
2019/10/16 Javascript
微信小程序实现锚点功能
2019/11/20 Javascript
[46:28]EG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.23
2019/09/05 DOTA
python类和函数中使用静态变量的方法
2015/05/09 Python
Python3.遍历某文件夹提取特定文件名的实例
2018/04/26 Python
python 创建一个空dataframe 然后添加行数据的实例
2018/06/07 Python
python+influxdb+shell编写区域网络状况表
2018/07/27 Python
python 安装教程之Pycharm安装及配置字体主题,换行,自动更新
2020/03/13 Python
pycharm 实现复制一行的快捷键
2021/01/15 Python
PUMA澳大利亚官方网站:德国运动品牌
2018/10/19 全球购物
蔻驰西班牙官网:COACH西班牙
2019/01/16 全球购物
台湾屈臣氏网路商店:Watsons台湾
2020/12/29 全球购物
自我鉴定怎么写
2013/12/05 职场文书
演讲稿怎么写才完美
2014/01/02 职场文书
初中家长寄语
2014/04/02 职场文书
科技馆观后感
2015/06/08 职场文书
2016年教师学习廉政准则心得体会
2016/01/20 职场文书
假如给我三天光明:舟逆水而行,人遇挫而达 
2019/10/29 职场文书
源码分析Redis中 set 和 sorted set 的使用方法
2022/03/22 Redis
Netty客户端接入流程NioSocketChannel创建解析
2022/03/25 Java/Android
全网非常详细的pytest配置文件
2022/07/15 Python