react入门----事件监听

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <!-- react核心库 -->
 7     <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
 8     <!-- 提供与dom相关的功能 -->
 9     <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
10     <!-- 将es6代码转换为es5语法格式 -->
11     <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
12 </head>
13 <body>
14     <div id="container"></div>
15     <script type="text/jsx">
16     var TestClickComponent = React.createClass({
17         handleClick: function (event) {
18             var tipE = ReactDOM.findDOMNode(this.refs.tip)
19             if(tipE.style.display === 'none') {
20                 tipE.style.display = 'inline'
21             } else {
22                 tipE.style.display = 'none'
23             }
24             <!-- 阻止浏览的冒泡事件和默认行为 -->
25             event.stopPropagation()
26             event.preventDefault()
27         },
28         render: function () {
29             return (
30                 <div>
31                     <button onClick={this.handleClick}>显示|隐藏</button><span ref="tip">测试点击</span>
32                 </div>
33             )
34         }
35     })
36     var TestInputComponent = React.createClass({
37     <!-- getInitialState使用用来初始化state的状态的-->
38         getInitialState: function () {
39             return {
40                 inputContent: ''
41             }
42         },
43         changeHandler: function(event) {
44         <!-- this.setState是用来修改state的状态 -->
45             this.setState({
46                 inputContent: event.target.value
47             })
48         },
49         render: function () {
50             return(
51                 <div>
52                     <!-- 这里是通过驼峰试的命名来绑定事件，例如onClick，onChange等等，他们的的值是一个js表达式-->
53                     <input type="text" onChange={this.changeHandler}/><span>{this.state.inputContent}</span>
54                 </div>
55             )
56         }
57     })
58     ReactDOM.render(
59         <div>
60             <TestClickComponent/>
61             <br/>
62             <br/>
63             <TestInputComponent/>
64         </div>,document.getElementById('container'));
65     </script>
66 </body>
67 </html>

转载于:https://www.cnblogs.com/songdongdong/p/7301093.html

react入门----事件监听相关推荐

react hooks 事件监听
react hooks 事件监听说明 useEffect useEffect执行一次 useEffect绑定和解绑事件问题:变量和state值不变且是初始值监听事件解决方法1 解决方法2 说明 ...
html中事件监听的使用,Vue.JS入门篇--事件监听
你可以使用 v-on 指令来绑定并监听 DOM 事件.绑定的内容可以是一个当前实例上的方法 (后面无需跟括号) 或一个内联表达式.如果提供的是一个方法,则原生的 DOM event 会被作为第一个参数 ...
℃江让您从精通到入门：OnClick事件监听的几种方式
笔译笔,不如人之比,见一见,不与人为鉴.苍天下, 弃细雨,混泪难断谁更惆:苍穹再,散绸绫,铺洒漫染何出犹. 今天笔者来说下Android中OnClick事件监听的几种书写方式. 匿名内部类的方式 pa ...
Fabricjs对Canvas画布和对象的事件监听
场景 Fabricjs一个简单强大的Canvas绘图库快速入门: Fabricjs一个简单强大的Canvas绘图库快速入门_BADAO_LIUMANG_QIZHI的博客-CSDN博客在上面的基础上, ...
移动端长按事件_Flutter事件监听
一. 事件监听在大前端的开发中,必然存在各种各样和用户交互的情况:比如手指点击.手指滑动.双击.长按等等. 在Flutter中,手势有两个不同的层次: 第一层:原始指针事件(Pointer Even ...
二、Vue基础语法学习笔记——事件监听v-on、条件判断（v-if、v-else-if、v-else、v-show）、循环遍历（v-for遍历数组对象，key属性、检测数组更新）、图书案例、双向绑定
四.事件监听在前端开发中,我们需要经常和用于交互. 这个时候,我们就必须监听用户发生的时间,比如点击.拖拽.键盘事件等等在Vue中如何监听事件呢?使用v-on指令 v-on介绍作用:绑定事件监听 ...
监听手指是否离开屏幕android_Flutter事件监听
一. 事件监听在大前端的开发中,必然存在各种各样和用户交互的情况:比如手指点击.手指滑动.双击.长按等等. 所有内容首发于公众号:coderwhy 在Flutter中,手势有两个不同的层次: 第一层 ...
java jmenu 监听_Java中用得比较顺手的事件监听
第一次听说监听是三年前,做一个webGIS的项目,当时对Listener的印象就是个"监视器",监视着界面的一举一动,一有动静就触发对应的响应. 一.概述通过对界面的某一或某些操 ...
RN性能优化以及事件监听
自从React Native出世,虽然官方一直尽可能的优化其性能,为了能让其媲美原生App的速度,但是现实感觉有点不尽人意.接下来介绍下实践中遇到的一些性能问题以及优化方案. 一.StackNavig ...
【方案篇】事件监听函数的内存泄漏，帮你搞定！不谢！！！
本文是理论篇 ,还有下篇代码篇. 前言工作中,我们会对window, DOM节点,WebSoket, 或者单纯的事件中心等注册事件监听函数. // window window.addEventL ...

react入门----事件监听

react入门----事件监听相关推荐

最新文章

热门文章