<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <script src="js/react.js"></script>
  <script src="js/react-dom.js"></script>
  <script src="js/browser.min.js"></script>
</head>
<body>
<div id="example"></div>

<script type="text/babel">

  var MyComponent = React.createClass({
    handleClick:function(){
      console.log(
      parseInt(this.refs.num1.value)+
      parseInt(this.refs.num2.value));
    },
    render:function(){
      return <div>
      <input type="text" ref='num1'/>
      <br/>
      <input type="text" ref='num2'/>
      <br/>
      <button onClick={this.handleClick}>求和</button>
      </div>
    }
  })

  ReactDOM.render(
  <MyComponent/>,
  document.getElementById('example')
  )

</script>

</body>
</html>

React 表单refs的更多相关文章

  1. react 表单获取多个input

    react  表单this.handleChange(key,e){ [key]:e.target.value} submit=()=>{ const {userName,age,status} ...

  2. 七、React表单详解 约束性和非约束性组件 input text checkbox radio select textarea 以及获取表单的内容

    一.约束性和非约束性组件: 非约束性组: MV: <input type="text" defaultValue="a" /> 这个 default ...

  3. 翻译 | 玩转 React 表单 —— 受控组件详解

    原文地址:React.js Forms: Controlled Components 原文作者:Loren Stewart 译者:小 B0Y 校对者:珂珂君 本文涵盖以下受控组件: 文本输入框 数字输 ...

  4. 6. React 表单使用介绍

            表单是前端页面中非常重要也是非常常用的一个内容,react 也在表单方面进行了很多封装,让开发者可以方便快捷地在 react 组件中使用表单.下面介绍如何在组件中正确的使用表单,从而可 ...

  5. react 表单

    import React ,{PropTypes}from 'react'; import { render } from 'react-dom'; const styles={ mb10:{ mar ...

  6. React表单元素的使用

    一. <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF ...

  7. react表单事件和取值

    常见的表单包括输入框,单选框,复选框,下拉框和多文本框,本次主要总结它们在react中如何取值. 输入框 在之前有说过输入框,可以先给input框的value绑定一个值,然后通过input框的改变事件 ...

  8. React 表单组件

    诸如 <input>.<textarea>.<option> 这样的表单组件不同于其他组件,因为他们可以通过用户交互发生变化.这些组件提供的界面使响应用户交互的表单 ...

  9. [转]React表单无法输入原因----约束性和非约束性组件

    转自:http://blog.csdn.net/lihongxun945/article/details/46730835 表单是前端非常重要的一块内容,并且往往包含了错误校验等逻辑. React对表 ...

随机推荐

  1. sw-stream

    https://github.com/kumavis/sw-stream ServiceWorkerStream and ServiceWorkerGlobalListener This a util ...

  2. metamask源码学习-ui/index.js

    The UI-即上图左下角metamask-ui部分,即其图形化界面 The MetaMask UI is essentially just a website that can be configu ...

  3. Unable to execute dex: Multiple dex files defineLcom/google/gson/JsonDeserializer;

    这是异常想必大家都知道的,是关于一个android jar包冲突的问题.为什么还要提呢,是因为这玩意真心让人蛋疼.有些时候稍微不注意(手贱)多导入一个包,就完蛋了.(jar包多的话搞不好带一上午调试) ...

  4. linux中断源码分析 - 中断发生(三)

    本文为原创,转载请注明:http://www.cnblogs.com/tolimit/ 回顾 上篇文章linux中断源码分析 - 初始化(二)已经描述了中断描述符表和中断描述符数组的初始化,由于在初始 ...

  5. SkylineGlobe 如何实现FlyTo定位到目标点之后触发的事件函数

    之前有朋友问,如何在Skyline里面实现FlyTo定位到目标点之后触发的事件函数呢? 下面的这段代码,就可以帮你解决这个问题. <!DOCTYPE html PUBLIC "-//W ...

  6. 2-微信小程序开发(开发界面说明,按钮点击切换显示内容)

    说一个功能,大家在用微信实现控制设备的时候,是不是都在为绑定设备发愁. 我看了很多厂家的微信控制,大部分都只是可以用微信给设备配网,但是没有做用微信绑定的. 一般做绑定都是用设备的MAC地址. 这里我 ...

  7. RocketMQ环境搭建

    1 源码下载 wget http://mirror.bit.edu.cn/apache/rocketmq/4.2.0/rocketmq-all-4.2.0-bin-release.zip unzip ...

  8. Luogu4338 ZJOI2018 历史 LCT、贪心

    传送门 题意:在$N$个点的$LCT$中,最开始每条边的虚实不定,给出每一个点的$access$次数,求一种$access$方案使得每条边的虚实变换次数之和最大,需要支持动态增加某个点的$access ...

  9. Linux下查找进程id并强制停止进程的脚本

    Linux下的tomcat的停止脚本shutdown.sh经常失败,造成tomcat进程没关闭.所以只能手动查找进程id,然后用kill命令来强制停止.每次都要这样查一下,然后再杀进程.感觉有点麻烦, ...

  10. java通过反射拷贝两个对象的同名同类型变量

    深拷贝和浅拷贝 首先对象的复制分为深拷贝和浅拷贝,关于这两者的区别,简单来说就是对于对象的引用,在拷贝的时候,是否会新开辟一块内存,还是直接复制引用. 两者的比较也有很多,具体可以看这篇文章: htt ...