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 类twitter的文本字数限制带提示效果插件
Apr 16 Javascript
javascript jscroll模拟html元素滚动条
Dec 18 Javascript
js屏蔽鼠标键盘(右键/Ctrl+N/Shift+F10/F11/F5刷新/退格键)
Jan 24 Javascript
屏蔽相应键盘按钮操作
Mar 10 Javascript
javascript实现全角半角检测的方法
Jul 23 Javascript
用户代理字符串userAgent可实现的四个识别
Sep 20 Javascript
JavaScript过滤字符串中的中文与空格方法汇总
Mar 07 Javascript
JavaScript实现Fly Bird小游戏
Dec 15 Javascript
JavaScript实现瀑布流以及加载效果
Feb 11 Javascript
基于vue 添加axios组件,解决post传参数为null的问题
Mar 05 Javascript
深入理解Vue父子组件生命周期执行顺序及钩子函数
Aug 12 Javascript
vue操作dom元素的3种方法示例
Sep 20 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判断正常访问和外部访问的示例
2014/02/10 PHP
WordPress中的shortcode短代码功能使用详解
2016/05/17 PHP
PHP使用PDO抽象层获取查询结果的方法示例
2018/05/10 PHP
jquery命令汇总,方便使用jquery的朋友
2012/06/26 Javascript
浅谈轻量级js模板引擎simplite
2015/02/13 Javascript
如何屏蔽防止别的网站嵌入框架代码
2015/08/24 Javascript
javascript实现tab切换的两个实例
2015/11/05 Javascript
深入浅析javascript中的作用域(推荐)
2016/07/19 Javascript
详解为Angular.js内置$http服务添加拦截器的方法
2016/12/20 Javascript
jQuery实现的背景颜色渐变动画效果示例
2017/03/24 jQuery
vue组件name的作用小结
2018/05/23 Javascript
使用ThinkJs搭建微信中控服务的实现方法
2019/08/08 Javascript
微信小程序自定义头部导航栏(组件化)
2019/11/15 Javascript
基于react项目打包css引用路径错误解决方案
2020/10/28 Javascript
es5 类与es6中class的区别小结
2020/11/09 Javascript
[37:21]完美世界DOTA2联赛PWL S2 Inki vs Magma 第二场 11.22
2020/11/24 DOTA
使用Django开发简单接口实现文章增删改查
2019/05/09 Python
用Python实现最速下降法求极值的方法
2019/07/10 Python
python  文件的基本操作 菜中菜功能的实例代码
2019/07/17 Python
python实现猜数字游戏
2020/03/25 Python
使用浏览器访问python写的服务器程序
2019/10/10 Python
Python selenium实现断言3种方法解析
2020/09/08 Python
在终端启动Python时报错的解决方案
2020/11/20 Python
pandas数据分组groupby()和统计函数agg()的使用
2021/03/04 Python
俄罗斯香水在线商店:AromaCode
2019/12/04 全球购物
杭州联环马网络笔试题面试题
2013/08/04 面试题
大学生毕业自我评价范文分享
2013/11/07 职场文书
英语系本科生求职信范文
2013/12/18 职场文书
槐乡的孩子教学反思
2014/04/27 职场文书
资助贫困学生倡议书
2014/05/16 职场文书
商业项目策划方案
2014/06/05 职场文书
2014年售票员工作总结
2014/11/19 职场文书
大学生考试作弊被抓检讨书
2014/12/27 职场文书
初一军训感言
2015/08/01 职场文书
七年级语文教学反思
2016/03/03 职场文书
2019年最新七夕唯美祝福语(60条)
2019/07/22 职场文书