简单按钮点击事件：

<!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. PowerShell 连接SQL

    因为对SQL操作比较多,但有些操作其实都是重复性的,只是参数不太一样了,例如silo id, server name 等.希望可以通过powershell脚本提高效率. 尝试如下 1. 使用Power ...

  2. 【转】PowerShell入门（十）：使用配置文件

    转至:http://www.cnblogs.com/ceachy/archive/2013/03/01/PowerShell_Profile.html 在命令行中定义别名.变量和函数,只是将它们添加在 ...

  3. IE9浏览器中的My97日历控件刷新后无法打开问题解决办法

    解决办法如下: 1:找到WdatePicker.js 2:将$crossFrame:true 改为$crossFrame:false. 3:重启服务,刷新页面发现OK.

  4. [SQL入门级] 接上篇，继续查询

    距离上一篇时间隔得蛮久了,这篇继续查询,简单总结一下聚合函数.分组的知识. 一.聚合函数(组函数/多行函数) 何谓多行函数,顾名思义就是函数作用于多行数据得出一个输出结果,什么意思呢?看图: 那么常用 ...

  5. ScrollView

    在程序设计中,有时我们需要实现自动滚屏或根据选择直接滚动到指定的位置的功能.这里用到的主要组件就是滚动视图(ScrollView). ---------- 那么使用ScrollView如何实现布局自动 ...

  6. HttpClient中转上传文件

    场景:客户端(浏览器)A---->选择文件上传---->服务器B---->中转文件---->服务器C---->返回结果---->服务器B---->客户端A 有 ...

  7. 20145227&20145201 《信息安全系统设计基础》实验四

    北京电子科技学院(BESTI) 实 验 报 告 课程:信息安全系统设计基础 班级:1452 姓名:(按贡献大小排名)鄢曼君 李子璇 学号:(按贡献大小排名)20145227 20145201 成绩: ...

  8. Unity LightmapParameters的使用

    Unity5的烘培十分不好用,今天看官方demo时发现可以用LightmapParameters对模型的GI配置进行单独覆写,介绍一下 LightmapParameters可以把全局光照的配置做成预设 ...

  9. LoadRunner使用之变量参数化

    LR性能测试之参数化设置 Q:何为参数化? LR在录制程序运行的过程中,VuGen(脚本生成器) 自动生成了包含录制过程中实际用到的数值的脚本,如果你企图在录制的脚本中使用不同的数值执行脚本的活动(如 ...

  10. 使用AFNetWorking读取JSON出现NSCocoaErrorDomain Code=3840的解决方法

    最近在使用AFNetworkWorking读取JSON时,出现了NSCocoaErrorDomain Code=3840的错误.这种错误应该是服务器端返回JSON格式不对造成的.通过Google搜到这 ...