1.显示隐藏

2.输入框输入内容，立即显示出来

代码如下：

注意：版本

React v15.0.1

ReactDOM v15.0.1

browser.min.js是编译文件，将代码解析为浏览器识别的js

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.  <meta charset="utf-8" />
  5.  <script type="text/javascript" src="react.js"></script>
  6.  <script type="text/javascript" src="react-dom.js"></script>
  7.  <script type="text/javascript" src="browser.min.js"></script>
  8. </head>
  9. <body>
  10. <div id="container"></div>
  11. <script type="text/babel">
  12.   var TestClickComponent=React.createClass({
  13.       handleClick:function(event){
  14.       var tip=this.refs.tip;
  15.       if(tip.style.display=="none"){
  16.          tip.style.display='inline';
  17.       }else{
  18.          tip.style.display='none';
  19.       }
  20.       event.stopPropagation();
  21.       event.preventDefault();
  22.       },
  23.       render:function(){
  24.           return(
  25.            <div>
  26.               <button onClick={this.handleClick}>显示|隐藏</button><span ref="tip">测试</span>
  27.            </div>
  28.           )
  29.       }
  30.   });
  31.  
  32.   var TestInputComponent=React.createClass({
  33.           getInitialState:function(){
  34.             return{
  35.                 inputContent:''
  36.             }
  37.           },
  38.           changeHandler:function(event){
  39.             this.setState({
  40.                 inputContent:event.target.value
  41.             })
  42.             event.stopPropagation();
  43.             event.preventDefault();
  44.           },
  45.         render:function(){
  46.             return(
  47.                 <div>
  48.                   <input type="text" onChange={this.changeHandler}/>
  49.                   <span>{this.state.inputContent}</span>
  50.                 </div>
  51.             )
  52.         }
  53.   });
  54.  ReactDOM.render(<div>
  55.                   <TestClickComponent/>
  56.                   <TestInputComponent/>
  57.                </div>,document.getElementById("container"));
  58. </script>
  59. </body>
  60. </html>

react 绑定事件的更多相关文章

  1. React绑定事件动态化的实现方法

    一.什么是绑定事件 1.1 事件 我这里指的事件一般指的是React自带的触发事件,我这里先简单举例几个 onClick //鼠标点击 onMouseEnter //鼠标滑进 onMouseLeave ...

  2. react绑定事件的几种写法

    方法一:最麻烦的写法,不推荐 import React from 'react'; class App extends React.Component { handleClick() { alert( ...

  3. 【 React - 1/100 】React绑定事件this指向问题--改变state中的值

    /** * 报错: * Cannot read property 'setState' of undefined * 原因: this指向不一致.btnAddCount中的this 和render中的 ...

  4. react绑定事件

    1.显示隐藏 2.输入框输入内容,立即显示出来 代码如下: 注意:版本 React v15.0.1 ReactDOM v15.0.1 browser.min.js是编译文件,将代码解析为浏览器识别的j ...

  5. 为React绑定事件，并修改state中的值

    import React from 'react' export default class ClickS extends React.Component { constructor () { sup ...

  6. React应该如何优雅的绑定事件？

    前言 由于JS的灵活性,我们在React中其实有很多种绑定事件的方式,然而,其实有许多我们常见的事件绑定,其实并不是高效的.所以本文想给大家介绍一下React绑定事件的正确姿势. 常见两种种错误绑定事 ...

  7. react 阻止事件冒泡

    前言 在学习react阻止事件冒泡,需要先了解 合成事件 和 原生事件 合成事件:在jsx中直接绑定的事件,就是合成事件: 原生事件: 通过js原生代码绑定的事件,就是原生事件: react事件:re ...

  8. react入门----事件监听

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. 深入理解React：事件机制原理

    目录 序言 DOM事件流 事件捕获阶段.处于目标阶段.事件冒泡阶段 addEventListener 方法 React 事件概述 事件注册 document 上注册 回调函数存储 事件分发 小结 参考 ...

随机推荐

  1. 【Java 基础篇】【第六课】接口interface

    Java提供的这个interface的语法,目的就是将接口从类中剥离出来,构成独立的主体. 首先加入我们定义了这个杯子接口: interface Cup { void addWater(int w); ...

  2. 流媒体学习一-------mediastreamer2 的简介

    Mediastreamer2 是一个功能强大且小巧的流引擎,专门为音视频电话应用而开发.这个库为linphone中所有的接收.发送多媒体流提供处理,包括音/视频捕获,编码和解码,渲染. 特性: 接收. ...

  3. php练习：给指定商品添加特殊效果

    老板说: 我只要在文本框填1|3 ,那第1和第3个商品都要标注! 思考过程: 有了重要信息1和3,而循环商品时$key按顺序自动递增,那么只要key和信息匹配的话,就判断商品添加标注,这个可以把位置信 ...

  4. AX中四种库存ABC分析法原理研究

    库存ABC分类,简单的说就是抓大放小,是为了让我们抓住重点,用最大精力来管理最重要的物料,而对于不太重要的物料则可以用较少的精力进行管理.它和我们平常说的八二法则有异曲同工之妙. 既然要应用库存ABC ...

  5. Number类型

    这是计算基础,复杂的以后不充. 1.Number(); var box = { toString :function(){ return '123'; } }; alert(Number(box)); ...

  6. scrollba美化

    1．overflow内容溢出时的设置(设定被设定对象是否显示滚动条)    overflow-x水平方向内容溢出时的设置    overflow-y垂直方向内容溢出时的设置    以上三个属性设置的值 ...

  7. 微信接口请求万能函数http_request

    关键字:http_request http_request post get http request原文: http://www.cnblogs.com/txw1958/p/http_request ...

  8. Android Service和Thread的关系

    不少Android初学者都可能会有这样的疑惑,Service和Thread到底有什么关系呢?什么时候应该用Service,什么时候又应该用Thread?答案可能会有点让你吃惊,因为Service和Th ...

  9. Spring Boot 3 Hibernate

    JdbcTemplate Spring对数据库的操作在jdbc上面做了深层次的封装,使用spring的注入功能,可以把DataSource注册到JdbcTemplate之中. JdbcTemplate ...

  10. frame与bounds的区别

    原来你M,frame.size和bounds.size不总是一样的 在UIViewController的- (void)willAnimateRotationToInterfaceOrientatio ...