React动态添加事件

最新推荐文章于 2024-08-04 13:47:51 发布

Web攻城狮

最新推荐文章于 2024-08-04 13:47:51 发布

阅读量7.4k

点赞数 1

分类专栏： react 文章标签： react 事件 React动态添加事件

本文链接：https://blog.csdn.net/b1244154318/article/details/52675003

版权

react 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

React动态添加事件

第一种方法：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>React</title>
	 <script src="lib/react.min.js"></script>
    <script src="lib/react-dom.min.js"></script>
    <script src="lib/browser.min.js"></script>
    <script src="lib/style.js"></script>
    <style>
    .lala{
    	color:red;
    	}
    </style>
</head>
 <body>
    <div id="example"></div>
    <script type="text/babel">
    var event={
         Click:function(){
            alert("点我干嘛?")

        },
        Touch:function(){
            alert("别碰触我!")

        },
        Dbclick:function(){
            alert("双击我干嘛?")

        }
    }
    var Hello=React.createClass({
    	render:function(){
            return (
                <div style={style.str1} > 我出来了!
                    <button onClick={event.Click}>点击我</button>
                    <button onDoubleClick={event.Dbclick}>双击我</button>
                    <button onTouchEnd={event.Touch}>触碰我</button>
                </div>
            )
    	}
    })
    Hello.prototype.css={
    	p3:{color:"green",fontSize:"50px",background:"#ccc"}
    }
      ReactDOM.render(
        <Hello/>,
        document.getElementById('example')
      );
    </script>
  </body>
</html>

第二种方法：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>React</title>
	 <script src="lib/react.min.js"></script>
    <script src="lib/react-dom.min.js"></script>
    <script src="lib/browser.min.js"></script>
    <script src="lib/style.js"></script>
    <style>
    .lala{
    	color:red;
    	}
    </style>
</head>
 <body>
    <div id="example"></div>
    <script type="text/babel">
   
    var Hello=React.createClass({
    	render:function(){
            return (
                <div style={style.str1} > 我出来了!
                    <button onClick={this.js.Click}>点击我</button>
                    <button onDoubleClick={this.js.Dbclick}>双击我</button>
                    <button onTouchEnd={this.js.Touch}>碰触我</button>
                </div>
            )
    	}
    })
    Hello.prototype.js={
    	
        Click:function(){
            alert("点我干嘛?")

        },
        Touch:function(){
            alert("别碰触我!")

        },
        Dbclick:function(){
            alert("双击我干嘛?")

        }
    }
      ReactDOM.render(
        <Hello/>,
        document.getElementById('example')
      );
    </script>
  </body>
</html>

第三种方法：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>React</title>
	 <script src="lib/react.min.js"></script>
    <script src="lib/react-dom.min.js"></script>
    <script src="lib/browser.min.js"></script>
    <script src="lib/style.js"></script>
    <style>
    .lala{
    	color:red;
    	}
    </style>
</head>
 <body>
    <div id="example"></div>
    <script type="text/babel">
    var Hello=React.createClass({
        Click:function(){
            alert("点我干嘛?")
        },
        Touch:function(){
            alert("别碰触我!")

        },
        Dbclick:function(){
            alert("双击我干嘛?")
        },
    	render:function(){
    		return (
				<div style={style.str1} > 我出来了!
					<button onClick={this.Click}>点击我</button>
                    <button onDoubleClick={this.Dbclick}>双击我</button>
                    <button onTouchEnd={this.Touch}>碰触我</button>
				</div>
    		)
    	}
    })
    Hello.prototype.css={
    	p3:{color:"green",fontSize:"50px",background:"#ccc"}
    }
      ReactDOM.render(
        <Hello/>,
        document.getElementById('example')
      );
    </script>
  </body>
</html>

如果不能使用以上js,可以使用以下：

<script src="http://static.runoob.com/assets/react/react-0.14.7/build/react.min.js"></script>
<script src="http://static.runoob.com/assets/react/react-0.14.7/build/react-dom.min.js"></script>
<script src="http://static.runoob.com/assets/react/browser.min.js"></script>

style.js如下：