zoukankan      html  css  js  c++  java
  • react 点击事件以及原始event与react封装好的事件点击区别

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>state</title>
    <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
    <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
    <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
    </head>
    <body>
    <div id="app"></div>
    <script type="text/babel">
    var NameButton=React.createClass({
    getInitialState:function(){
    return{
    isVisable:false,
    count:0
    }

    },
    handleClick:function(e){
    console.log(e) 这里的event是被react封装好的,里面的很多值在你不使用的时侯表面显示是null 真正获取的时候就有值 比如e.target就会显示当前这个元素
    console.log(e.nativeEvent) 如果想使用原始的event 就用e.nativeEvent
    this.setState({
    count:this.state.count+1
    })
    },
    render:function(){
    var styleObj={
    opacity:this.state.count>5 ? '0.2':'1',
    }
    return(
    <div>
    <h3>点击下面按钮</h3>
    <button style={styleObj} onClick={this.handleClick}>点击了{this.state.count}次</button>
    </div>
    )
    }
    }
    );
    ReactDOM.render(
    <NameButton/>,
    document.getElementById("app")
    )

    </script>
    </body>
    </html>

  • 相关阅读:
    4.net基础之委托事件
    2.net基础之反射
    绕过百度网盘速度限制直接下载百度网盘文件
    1.net基础之泛型
    网页图片按需加载
    小米官网图片轮播
    html+css3实现网页时钟
    接口自动化测试方案详解
    接口测试用例设计实践总结
    Mysql 高可用(MHA)-读写分离(Atlas)
  • 原文地址:https://www.cnblogs.com/yaomengli/p/9227480.html
Copyright © 2011-2022 走看看