React动态添加事件

最新推荐文章于 2024-04-27 09:57:28 发布
最新推荐文章于 2024-04-27 09:57:28 发布
阅读量1.8k 收藏
点赞数
分类专栏： React

第一种方法：

[javascript]  view plain  copy
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>React</title>  
  6.      <script src="lib/react.min.js"></script>  
  7.     <script src="lib/react-dom.min.js"></script>  
  8.     <script src="lib/browser.min.js"></script>  
  9.     <script src="lib/style.js"></script>  
  10.     <style>  
  11.     .lala{  
  12.         color:red;  
  13.         }  
  14.     </style>  
  15. </head>  
  16.  <body>  
  17.     <div id="example"></div>  
  18.     <script type="text/babel">  
  19.     var event={  
  20.          Click:function(){  
  21.             alert("点我干嘛?")  
  22.   
  23.         },  
  24.         Touch:function(){  
  25.             alert("别碰触我!")  
  26.   
  27.         },  
  28.         Dbclick:function(){  
  29.             alert("双击我干嘛?")  
  30.   
  31.         }  
  32.     }  
  33.     var Hello=React.createClass({  
  34.         render:function(){  
  35.             return (  
  36.                 <div style={style.str1} > 我出来了!  
  37.                     <button onClick={event.Click}>点击我</button>  
  38.                     <button onDoubleClick={event.Dbclick}>双击我</button>  
  39.                     <button onTouchEnd={event.Touch}>触碰我</button>  
  40.                 </div>  
  41.             )  
  42.         }  
  43.     })  
  44.     Hello.prototype.css={  
  45.         p3:{color:"green",fontSize:"50px",background:"#ccc"}  
  46.     }  
  47.       ReactDOM.render(  
  48.         <Hello/>,  
  49.         document.getElementById('example')  
  50.       );  
  51.     </script>  
  52.   </body>  
  53. </html>  


第二种方法：

[javascript]  view plain  copy
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>React</title>  
  6.      <script src="lib/react.min.js"></script>  
  7.     <script src="lib/react-dom.min.js"></script>  
  8.     <script src="lib/browser.min.js"></script>  
  9.     <script src="lib/style.js"></script>  
  10.     <style>  
  11.     .lala{  
  12.         color:red;  
  13.         }  
  14.     </style>  
  15. </head>  
  16.  <body>  
  17.     <div id="example"></div>  
  18.     <script type="text/babel">  
  19.      
  20.     var Hello=React.createClass({  
  21.         render:function(){  
  22.             return (  
  23.                 <div style={style.str1} > 我出来了!  
  24.                     <button onClick={this.js.Click}>点击我</button>  
  25.                     <button onDoubleClick={this.js.Dbclick}>双击我</button>  
  26.                     <button onTouchEnd={this.js.Touch}>碰触我</button>  
  27.                 </div>  
  28.             )  
  29.         }  
  30.     })  
  31.     Hello.prototype.js={  
  32.           
  33.         Click:function(){  
  34.             alert("点我干嘛?")  
  35.   
  36.         },  
  37.         Touch:function(){  
  38.             alert("别碰触我!")  
  39.   
  40.         },  
  41.         Dbclick:function(){  
  42.             alert("双击我干嘛?")  
  43.   
  44.         }  
  45.     }  
  46.       ReactDOM.render(  
  47.         <Hello/>,  
  48.         document.getElementById('example')  
  49.       );  
  50.     </script>  
  51.   </body>  
  52. </html>  


第三种方法：

[javascript]  view plain  copy
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>React</title>  
  6.      <script src="lib/react.min.js"></script>  
  7.     <script src="lib/react-dom.min.js"></script>  
  8.     <script src="lib/browser.min.js"></script>  
  9.     <script src="lib/style.js"></script>  
  10.     <style>  
  11.     .lala{  
  12.         color:red;  
  13.         }  
  14.     </style>  
  15. </head>  
  16.  <body>  
  17.     <div id="example"></div>  
  18.     <script type="text/babel">  
  19.     var Hello=React.createClass({  
  20.         Click:function(){  
  21.             alert("点我干嘛?")  
  22.         },  
  23.         Touch:function(){  
  24.             alert("别碰触我!")  
  25.   
  26.         },  
  27.         Dbclick:function(){  
  28.             alert("双击我干嘛?")  
  29.         },  
  30.         render:function(){  
  31.             return (  
  32.                 <div style={style.str1} > 我出来了!  
  33.                     <button onClick={this.Click}>点击我</button>  
  34.                     <button onDoubleClick={this.Dbclick}>双击我</button>  
  35.                     <button onTouchEnd={this.Touch}>碰触我</button>  
  36.                 </div>  
  37.             )  
  38.         }  
  39.     })  
  40.     Hello.prototype.css={  
  41.         p3:{color:"green",fontSize:"50px",background:"#ccc"}  
  42.     }  
  43.       ReactDOM.render(  
  44.         <Hello/>,  
  45.         document.getElementById('example')  
  46.       );  
  47.     </script>  
  48.   </body>  
  49. </html>  

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

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

style.js如下：

  1. var style={  
  2.      str1:{"font-size":"40px",color:"green",width:"200px",height:"300px","text-align":"center",border:"1px solid gray"}  
  3. } 

原文链接
http://blog.csdn.net/b1244154318/article/details/52675003
m0_38073829
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
React项目动态设置title标题的方法示例
10-17
主要介绍了React项目动态设置title标题的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
react-add-table-dynamic-row:使用React Hook动态添加表行
05-26
React添加表动态行 了解如何使用React Hooks动态创建Table行！ 知识？ 试用
react动态给组件添加事件_React实战—组件行为：React中的事件（4）
weixin_39636987的博客
01-24 1019
网页是组件构成的，组件是一系列标签形成的单一功能。所以考虑组件无非也就三件事，结构、表现、和行为。结构JSX搞定了（当然JSX不仅仅干这个），表现是CSS的事儿，我们重点说下行为，也就是事件和钩子。事件好说，就是户干了啥事儿，然后有什么样的相应。钩子就是在组件怎么样的时候，干什么事儿。本文先说事件，因为这个简单的让人发指，钩子用到了我们再说。事件还是老话，你把原生组件我讲那篇文章看懂了，react...
探秘React Load Script：一种高效、灵活的动态加载脚本解决方案
最新发布
gitblog_00091的博客
04-27 408
探秘React Load Script：一种高效、灵活的动态加载脚本解决方案 项目地址:https://gitcode.com/blueberryapps/react-load-script 在现代Web开发中，我们经常需要在运行时动态加载外部JavaScript资源，以提升用户体验或按需加载组件。react-load-script就是这样一款专为React设计的库，它使动态加载和管理外部脚本变...
React 添加一个事件
weixin_30820151的博客
01-04 218
React 添加一个事件 以点击事件为例 一般家在render渲染里 添加一个事件（在标签中用html原生元素以小写字母开头（onClick）） render:function(){ 添加一个事件（在标签中用html原生元素以小写字母开头（onClick）） return (<h2 onClick={this.handleClick}>点我!点击次数为:{this.s...
react动态增加state_react事件处理及动态样式添加
weixin_35545563的博客
01-17 222
多数据的事件绑定，循环数据来进行绑定。如下方式就是循环绑定事件的基本代码：this.state.lists.map(function(value,index,array){//代码片段}.bind(this))这里是一块事件绑定的例子，可以点击按钮，点击的那个按钮来实现选中的状态，并且可获取点击按钮的值：var Ask = React.createClass({getInitialState: f...
reactjs onClick绑定点击事件的正确写法
学亮编程手记
07-26 403
reactjs onClick绑定点击事件的正确写法
通过实例学习React中事件节流防抖
10-16
主要介绍了通过实例学习React中事件节流防抖，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，,需要的朋友可以参考下
浅谈react.js 之 批量添加与删除功能
10-20
下面小编就为大家带来一篇浅谈react.js 之 批量添加与删除功能。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
React.Js添加与删除onScroll事件的方法详解
10-19
主要给大家介绍了关于React.Js添加与删除onScroll事件的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。
react向元素内，动态添加style，class
qq_45358768的博客
12-02 1539
react开发过程中，经常会需要动态向元素内添加样式style或className，那么应该如何动态添加呢？？？ 一、react向元素内，动态添加style 例如：有一个DIV元素， 需要动态添加一个 display:block | none 样式， 那么： 或者， 多个样式写法： 二、react向元素内，动态添加className 比如： 1、DIV标签中，没有其他class，只需要动态添加一个...
React 动态添加路由
小明同学c的成长日记
12-22 1万+
react动态渲染菜单及路由
React常规篇:react给对象动态添加属性(TS语法)
YanHSama的博客
10-23 5783
元素隐式具有 "any" 类型，因为类型为 "string" 的表达式不能用于索引类型 "{}"。 在类型 "{}" 上找不到具有类型为 "string" 的参数的索引签名。ts(7053)
React绑定事件动态化的实现方法
weixin_30682415的博客
10-18 404
一、什么是绑定事件 1.1 事件 我这里指的事件一般指的是React自带的触发事件,我这里先简单举例几个 onClick //鼠标点击 onMouseEnter //鼠标滑进 onMouseLeave //鼠标滑出 1.2 绑定事件 一般有三种绑定事件的方法: /* * 1. constructor函数里统一bind */ constructor(arg){ s...
React map生成元素添加点击事件绑定this
赵又又的博客
06-04 4113
问题使用.map(function(Item)生成元素添加onClick事件：onClick={this.provinceChange.bind(this, "99")}时，前台访问报错：Uncaught TypeError: Cannot read property 'provinceChange' of undefined。provinceChange是在class中定义的方法：provinc...
React 动态增加，删除，上下移动dom <li><td>
热门推荐
liuyuqin1991的专栏
12-19 2万+
思想在react的世界里，都是状态变更（数据变更）来驱动dom变化，动态添加dom不像以前用jquery一样append一个<li>或者一个<td> 这样了，而是通过装载<li> 或者<td> 数据数组[]来动态添加dom，下面的例子实现使用了antd的组件库 参考：https://ant.design/components/form-cn/#components-form-demo-dynami
React学习之事件绑定处理机制（五）
qq_18661257的专栏
03-16 9847
React对于JSX事件处理的方式和DOM元素的事件绑定有点类似，但是有语法上的一些差异。 React事件的命名必须是驼峰命名法，不能是小写，和我们写组件是一样的，我们的组件类的首写字母必须大写，不然会出问题,就是说onclick要写成onClick 当我们在JSX语句中绑定事件时，我们不能用字符串，必须用大括号包裹一个函数表达式 区别如下：//HTML <button onclick="taddl
React 状态、事件与动态渲染
qswm_18301240090的博客
07-09 608
列表与组件的键值首先让我们看看在JavaScript中我们是如何处理一个列表的：const numbers = [1, 2, 3, 4, 5]; const doubled = numbers.map((number) =&gt; number * 2); console.log(doubled);例子中使用map方法将每个元素的值*2，最后得到的数组为：[2, 4, 6, 8, 10]。在Rea...
react动态div添加ref
05-05
要动态添加 ref，可以使用 React 的 `createRef()` 方法。以下是一个示例： ```jsx import React, { Component } from 'react'; class MyComponent extends Component { constructor(props) { super(props); ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值