事件冒泡 + 拖拽 + 图片懒加载 + 生命周期演示

最新推荐文章于 2023-01-31 19:01:39 发布

天蒙蒙亮

最新推荐文章于 2023-01-31 19:01:39 发布

阅读量326

点赞数

分类专栏： React js

本文链接：https://blog.csdn.net/qq_38719039/article/details/108688479

版权

React 同时被 2 个专栏收录

63 篇文章 3 订阅

订阅专栏

45 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <title> 表单,设置默认值</title>
    <script src="build/react.js"></script>
    <script src="build/react-dom.js"></script>
    <script src="build/browser.min.js"></script>
    <script src="build/jquery.min.js"></script> 
    <script type="text/babel"> 
    class LoginForm extends React.Component{ 
         
          render(){//设置表单选项的默认值
              return  <form action="www.baidu.com" methed="get"> 用户名：
                         <input type="text"  name="username"
                                defaultValue={this.props.aaa} /><br/>是否接收邮件：
		                 <input type="checkbox" defaultChecked="true"/><br/>  
		                 <input type="submit" value="提交" /> 
		              </form>
          }
       }
      
      //window.onload= function(){
      $(function(){
        ReactDOM.render(
         <LoginForm aaa="blue"/>, 
         $('blue-view')[0]
        );
      });
    </script>
  </head>
  <body>
    <blue-view></blue-view> 
</body>
</html>

2.事件冒泡

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title> 事件冒泡</title>
  <script src="build/react.js"></script>
  <script src="build/react-dom.js"></script>
  <script src="build/browser.min.js"></script>
  <script src="build/jquery.min.js"></script>
  <script type="text/babel">
    class TmpComp extends React.Component {
      constructor(...args) {
        super(...args);
      }
      fn1(ev) {
        alert("父级");
      }
      fn2(ev) {
        alert("子级");
        // ev.stopPropagation(); //在子级中，干掉事件冒泡
      }

      render() {
        const bg = { background: '#f00', height: '100px' };
        const bg2 = { background: '#06f' };
        return <div onClick={this.fn1.bind(this)} style={bg}>
          <div onClick={this.fn2.bind(this)} style={bg2}>aaaaaa</div>
        </div>
      }
    }

    //window.onload= function(){
    $(function () {
      ReactDOM.render(
        <TmpComp />,
        $('blue-view')[0]
      );
    });

  </script>
</head>

<body>
  <blue-view></blue-view>
</body>

</html>

3. 图片懒加载

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <title> 图片延迟加载</title>
    <script src="build/react.js"></script>
    <script src="build/react-dom.js"></script>
    <script src="build/browser.min.js"></script>
    <script src="build/jquery.min.js"></script>
    <style style="text/css" >
       img{ width:300px;height:200px; }
    </style>
    <script type="text/babel"> 
    class LazyLoad extends React.Component{  
          constructor(...args){
             super(...args);
             //this.state={ };//初始化状态 
             this.aImagPath = this.props.imgs.split(',');//imgs属性
             
             const _this= this;//引用
             window.onscroll= function(){
                var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
                console.log( scrollTop);
                
                if(scrollTop>600){
                   console.log("_this.refs['div1']",_this.refs['div1']);//操作原生的div节点
                   $(_this.refs['div1']).css('background','red');//.childen();//元素的子元素。 
                   var oS = $(_this.refs['div1']).children('img');//元素的子元素。 
                   console.log( oS);
                   for( let i=0; i<oS.length; i++){
                     oS[i].attr('src', oS[i].attr('data-src')) //把data-src的值 赋值给src
                     oS[i].attr('data-isLoaded', 1) //已加载过的图片做标记
                   }
                   
                }
                if(scrollTop <600){
                   console.log("_this.refs",_this.refs);//操作原生的div节点 
                   $(_this.refs['div1']).css('background','#fff');//.childen();//元素的子元素。 
                }
                
             }
          }
          
          render(){
              var arr=[];
              for(var i=0;i < this.aImagPath.length; i++){
                arr.push( <img key={i} data-src={'img/'+ this.aImagPath[i]}  alt="logo" />);
              }
              return <div ref='div1'>{arr}</div> 
          }
          
       }
      
      
      //window.onload= function(){
      $(function(){
        ReactDOM.render(
          <LazyLoad  imgs="吊桥.jpg,吊桥2.jpg,吊桥3.jpg,吊桥4.jpg,吊桥.jpg,吊桥2.jpg,吊桥3.jpg,吊桥4.jpg" />, 
          $('blue-view')[0]
        ); 
      });
      
    </script>
</head>
<body>
    <blue-view></blue-view> 
</body>
</html>

4. 拖拽

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <title> 拖拽</title>
    <script src="build/react.js"></script>
    <script src="build/react-dom.js"></script>
    <script src="build/browser.min.js"></script>
    <script src="build/jquery.min.js"></script>
    <style style="text/css" >
       .box{ width:300px;height:300px;background:green; position:absolute;/**/}
    </style>
    <script type="text/babel"> 
    class Drag extends React.Component{  
          constructor(...args){
             super(...args);
             this.state={ x:10, y:0};//初始化状态 
          }
          fn(ev){
             //alert( ev.pageX ); //鼠标在页面中的坐标
             var disX= ev.pageX - this.state.x;//计算拖拽距离
             var disY= ev.pageY - this.state.y;
             
             var _this = this;
             //$(document).mousemove(function(ev){
             document.onmousemove= function(ev){
                 _this.setState({ // 一切核心在于状态
                   x: ev.pageX-disX,
                   y: ev.pageY-disY
                 });
             };
             //$(document).mouseup(function(){
             document.onmouseup= function(){
                  document.onmousemove= null; 
             };
          }
          
          render(){
              return <div style={{left: this.state.x+'px', top: this.state.y+'px', color:'#f60'}} 
              className="box" onMouseDown={ this.fn.bind(this)}> 
                     111
                </div>
          }
          
       }
      
      
      //window.onload= function(){
      $(function(){
        ReactDOM.render(
         <Drag />, 
         document.getElementById('example')
        ); 
      });
    </script>
  </head>
  <body>
    <div id="example"></div> 
</body>
</html>

5. 生命周期演示

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <title> 生命周期演示</title>
    <script src="build/react.js"></script>
    <script src="build/react-dom.js"></script>
    <script src="build/browser.min.js"></script>
    <script type="text/babel">
     
     class Comp extends React.Component{  
          constructor(...args){
             super(...args);//父类
             this.state={ h:0, m:0, s:0}; //初始化状态
             
             var _this = this; //计时器里面的this 存在问题，所以在此处存一下。
             setInterval(function(){
                 _this.tick();
             },1000);
          }
          
          componentWillUpdate(){ //在创建之前
             console.log("即将创建完成...");
          }
          componentDidUpdate(){ //在创建之后
             console.log("刚刚创建完成。");
          }
          
          tick(){
             var oDate= new Date(); 
             this.setState({ //设置状态
               h: oDate.getHours(),
               m: oDate.getMinutes(),
               s: oDate.getSeconds()
             });
          }
          render(){
              return <div>
                   <span>{this.state.h}</span>:
                   <span>{this.state.m}</span>:
                   <span>{this.state.s}</span>
                </div>
          }
      }
      
      
      window.onload= function(){
        ReactDOM.render(
         <Comp/>, 
         document.getElementById('example')
        ); 
      }
    </script>
  </head>
  <body>
    <div id="example"></div> 
</body>
</html>