简单按钮点击事件：

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <!-- 区别就在于 babel 支持将按照ES6写的代码转成ES5格式的代码，
    以便让其能在现代浏览器上正常运行，用jsx， 只能用ES5的语法。 -->
    <script type="text/babel">
    var HelloMessage=React.createClass({
        handClick:function(event){
            <!-- 获取真实DOM  ReactDOM.findDOMNode函数 -->
            var tipE=ReactDOM.findDOMNode(this.refs.tip)
            if(tipE.style.display==="none"){
                tipE.style.display="inline"
            }else{
                tipE.style.display="none"
            }
            <!-- 将停止事件的传播 -->
            event.stopPropagation()
            <!-- 阻止元素发生默认的行为 -->
            event.preventDefault()
        },

        render: function(){
          return (
                    
          <div>
              <button onClick={this.handClick}>显示|隐藏</button>
              <span ref="tip">测试点击</span>
          </div>
          )
        
        }
    });
    <!-- ReactDom是React的一部分。ReactDOM是React和DOM之间的粘合剂，
    一般用来定义单一的组件，或者结合ReactDOM.findDOMNode（）来使用。
    更重要的是ReactDOM包已经允许开发者删除React包添加的非必要的代码，
    并将其移动到一个更合适的存储库。 -->
      ReactDOM.render(
       <HelloMessage />,
       document.getElementById('example')
      );
     
    </script>
  </body>
</html>

输入框的绑定简单实现

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
    var HelloMessage=React.createClass({
        getInitialState:function(){
              return {
                contentText:''
              }
        },
        changContent:function(event){
           this.setState({

                 contentText: event.target.value
           })
            event.stopPropagation()
            event.preventDefault()
        },

        render: function(){
          return (       
          <form>
              <input type="text" placeholder="说点什么吧" onChange={this.changContent} />
              <p>{this.state.contentText}</p>
          </form>
          )
        
        },
    });
      ReactDOM.render(
       <HelloMessage />,
       document.getElementById('example')
      );
     
    </script>
  </body>
</html>

React初识（按钮点击+输入绑定）的更多相关文章

  1. 初识Vue2（一）：表单输入绑定（附Demo）

    在线演示 http://demo.xiongze.net/ 下载地址 https://gitee.com/xiongze/Vue2.git js引用 <!--这里可以自己下载下来引用,也可以使用 ...

  2. 2019-11-29-WPF-绑定命令在-MVVM-的-CanExecute-和-Execute-在按钮点击都没触发可能的原因...

    原文:2019-11-29-WPF-绑定命令在-MVVM-的-CanExecute-和-Execute-在按钮点击都没触发可能的原因... title author date CreateTime c ...

  3. 2019-5-8-WPF-绑定命令在-MVVM-的-CanExecute-和-Execute-在按钮点击都没触发可能的原因...

    title author date CreateTime categories WPF 绑定命令在 MVVM 的 CanExecute 和 Execute 在按钮点击都没触发可能的原因 lindexi ...

  4. Javascript之三种按钮点击事件

    学习Javascript必须要先掌握基本的事件方法和语法,这些都是我们学过的也是最基本的.以前忘了总结,所以现在回顾,综合地总结一下,温故而知新. Javascript有三种按钮点击事件,分别为ale ...

  5. 前端MVC Vue2学习总结（五）——表单输入绑定、组件

    一.表单输入绑定 1.1.基础用法 你可以用 v-model 指令在表单控件元素上创建双向数据绑定.它会根据控件类型自动选取正确的方法来更新元素.尽管有些神奇,但 v-model 本质上不过是语法糖, ...

  6. Vue的指令系统、计算属性和表单输入绑定

    指令系统 指令 (Directives) 是带有 v- 前缀的特殊特性.指令特性的值预期是单个 JavaScript 表达式 (v-for 是例外情况,稍后我们再讨论).指令的职责是,当表达式的值改变 ...

  7. vue项目引入FastClick组件解决IOS系统下h5页面中的按钮点击延迟，连续点击无反应的问题

    异常描述: ios系统手机中访问h5页面,按钮点击有延迟,连续点击卡顿.无反应. 异常原因: 这要追溯至 2007 年初.苹果公司在发布首款 iPhone 前夕,遇到一个问题:当时的网站都是为大屏幕设 ...

  8. iOS 11开发教程（十七）iOS11应用视图之使用按钮接收用户输入

    iOS 11开发教程(十七)iOS11应用视图之使用按钮接收用户输入 在iOS中提供了很多的控件以及视图来丰富用户界面,对于这些视图以及控件我们在上一章中做了简单的介绍.本章我们将详细讲解这些视图. ...

  9. Vue.js教程--基础2(事件处理 表单输入绑定

    事件处理 表单输入绑定 事件处理 监听v-on 监听 DOM 事件,并在触发时运行一些 JavaScript 代码. 可以在v-on:click=''加内联语句. 有时也需要在内联语句处理器中访问原始 ...

随机推荐

  1. ASP.NET 发布到IIS后支撑woff 的解决方案

    <system.webServer>    <staticContent>        <remove fileExtension=".woff" ...

  2. HTML转移字符对照表

    body { margin: 0; padding: 0; background: #FFF; color: #000; font-family: "宋体", arial; fon ...

  3. Android存储

    Android的四种数据存储方式: 1.SharedPrefrences 2.SQLite 3.Content Provider 4.File SharedPrefrences: 1.是一种轻型的数据 ...

  4. AngularJS 后台交互

    我们可以使用内置的$http服务直接同外部进行通信.$http服务只是简单的封装了浏览器原生的XMLHttpRequest对象. 1.链式调用 $http服务是只能接受一个参数的函数,这个参数是一个对 ...

  5. Js控制Div在浏览器中的高度

    //需求是,我需要通过浏览器内容可视化的高度来控制div的高度boxheight(); //执行函数function boxheight(){ //函数:获取尺寸 //获取浏览器窗口高度 var wi ...

  6. css基础样式四

    上次我们讲到了相对定位: 这次我们了解下绝对定位; 绝对定位: #box_relative { position: absolute; left: 30px; top: 20px; } 绝对定位会脱离 ...

  7. XML序列化

    1.先创建资产文件assets AssetManager am=getAssts(); 2.获得文件字节输入流 InputStrem is=am.open("weather"); ...

  8. Http组件的介绍

    do_Http组件就是实现http/https协议的组件. 首先要说明一下,Do平台只是一个移动端开发的平台,不涉及任何后台服务端的技术,你可以使用你自己任何熟悉的语言和技术来实现服务端,do_Htt ...

  9. 修改bootstrap modal模态框的宽度

    原文链接:http://blog.csdn.net/wuhawang/article/details/52252912 修改模态框的宽度很简单,修改width属性就可以了 但是要注意的一点是,修改的不 ...

  10. switch case

    Console.WriteLine("1土豆"); Console.WriteLine("2玉米"); Console.WriteLine("3小麦& ...