<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>

</head>

<body>

    <div id="container"></div>

    <script type="text/jsx">

        var TestClickComponent = React.createClass({

            handleClick:function(event){

                var tipE = React.findDOMNode(this.refs.tip); {/* 获取索引 */}

                if(tipE.style.display === 'none'){

                    tipE.style.display = 'inline';

                }else{

                    tipE.style.display='none';

                }

                event.preventDefault();

                event.stopPropagation();

            },

            render:function(){

                return(

                    <div>

                        <button onClick={this.handleClick}>显示|隐藏</button><span ref="tip">测试点击</span>

                    </div>

                )

            }

        });

        var TestInputComponent = React.createClass({

            getInitialState:function(){

                return {

                    inputContent:''

                }

            },

            changeHandler:function(event){

                this.setState({

                    inputContent:event.target.value

                })

                event.preventDefault();

                event.stopPropagation();

            },

            render:function(){

                return(

                    <div>

                        <input type="text" onChange={this.changeHandler} /><span>{this.state.inputContent}</span>

                    </div>

                )

            }

        });

        React.render(

        <div>

              <TestClickComponent></TestClickComponent>

              <TestInputComponent></TestInputComponent>

          </div>,document.getElementById("container")

        )

    </script>

</body>

</html>

react 点击事件的更多相关文章

  1. react 点击事件+父子传值

    接下来要做的效果是,在父组件添加两个按钮,点击后改变父组件传过去的值 父组件 import React, { Component } from 'react'; import Test from '. ...

  2. react 点击事件传值

    test(e){ console.log(e.target) } <button onClick={(e)=>{this.test(e)}}></button> 有时要是 ...

  3. react native 中webview内的点击事件传到外部原生调用

    先说一下我使用webview的时候遇到的一个功能需求 是这样的,上图中的这个页面是用h5做的,但是由于点击"我的优惠劵"是需要跳转到我原生的页面,也就是说我需要获得这个h5提供的点 ...

  4. 深入React事件系统(React点击空白部分隐藏弹出层；React阻止事件冒泡失效)

    只关注括号内问题的同学,可直接跳转到蓝字部分.(标题起的有点大,其实只讨论一个问题) 两个在React组件上绑定的事件,产生冲突后,使用e.stopPropagation(),阻止冒泡,即可防止事件冲 ...

  5. React 的 DOM 添加多个点击事件

    第一直觉代码如下:后果是写在后面的事件函数覆盖前面的事件函数,只执行第二条(弹出 222). import React, { Component, Fragment } from 'react' ex ...

  6. react native 键盘遮挡按钮点击事件

    在做项目的时候,我遇到一个很奇怪的问题,我先描述一下问题,在InputText输入内完成以后,点击按钮进行下一步的操作的时候,第一次点击的时候,按钮没有响应,第二次点击的时候才会响应.这样对用户体验有 ...

  7. React 中阻止事件冒泡的问题

    在正式开始前,先来看看 JS 中事件的触发与事件处理器的执行. JS 中事件的监听与处理 事件捕获与冒泡 DOM 事件会先后经历 捕获 与 冒泡 两个阶段.捕获即事件沿着 DOM 树由上往下传递,到达 ...

  8. react 点击空白处隐藏弹出层

    点击空白处隐藏弹出层的原理是:在 document 上绑定事件来隐藏弹出层,这样点击任何元素的时候都会冒泡到 document 上,都会执行隐藏弹出层的功能.然后我们在不需要隐藏弹出层的元素上阻止冒泡 ...

  9. angularJs 多文件动态上传（删除其中一个文件的时候，要么file没被删除，要么删除了之后，点击事件失效）

    <div cacModule.controller('CacScriptEditCtrl', CacScriptEditCtrl); CacScriptEditCtrl.$inject = [' ...

随机推荐

  1. TCP单线程实现并发

    服务端 from gevent import monkey;monkey.patch_all() import socket from gevent import spawn server = soc ...

  2. 洛谷P1991 无线通讯网【最小生成树】

    题目:https://www.luogu.org/problemnew/show/P1991 题意:有p个点的坐标,可以有s个点使得这s个点之间可以无限制通信. 要使所有点之间两两有通信的路径(可以是 ...

  3. python - Flask 上下文管理 流程

    上下文管理:    - 请求上下文 (ctx=RequestContext())  : request/session    - App上下文  (app_ctx=AppContext())  : a ...

  4. pyharm无法安装包的问题

    1.换成下面这个网址 https://github.com/pypa/pip/issues/5236 2.下载最新的pip  3. 然后换回 https://pypi.org/simple/

  5. [Angular 8] Implement a Custom Preloading Strategy with Angular

    Preloading all modules is quite an extreme approach and might not always be desirable. For instance, ...

  6. P2734 游戏 A Game

    题目背景 有如下一个双人游戏:N(2 <= N <= 100)个正整数的序列放在一个游戏平台上,游戏由玩家1开始,两人轮流从序列的任意一端取一个数,取数后该数字被去掉并累加到本玩家的得分中 ...

  7. TensorFlow(八)：tensorboard可视化

    import tensorflow as tf from tensorflow.examples.tutorials.mnist import input_data from tensorflow.c ...

  8. intelij idea 2018 license server

    http://www.cnblogs.com/jin-zhe/p/9267912.html

  9. 经常用到(创建OS)的命令

    1. 将汇编代码编译为二进制模块文件 nasm mbr.asm -o mbr                         nasm loader.asm -o loader 2. 将wirte.c ...

  10. 通过Confulence API统计用户文档贡献量

    Confulence提供了非常清晰的RESTful API,直接使用API比confluence_python_cli这个库更方便. 参考文档:https://developer.atlassian. ...