<!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. Shell脚本开发过程中遇到的问题处理

    1. 执行shell脚本报  Unsupported major.minor version 52.0 报错原因:java文件jdk和服务器上的jdk不匹配, 解决方法: a.查看当前服务器用的jdk ...

  2. linux ntp 时间同步

    一.时间同步服务器可以将数据库服务器作为同步服务器ntp.conf 保持不变 //启动服务service ntpd start //设置ntpd服务自启动chkconfig ntpd on//检查ch ...

  3. SkylineGlobe的PopupMessage里面嵌入的网页如何与主页面交互通讯

    1.主页面调用PopupMessage,如果需要传值,就是普通的页面间的传值就可以实现了. a.html页面调用PopupMessage创建方法,url传入b.html?x=111&y=22; ...

  4. odoo学习之弹框显示

    按条件隐藏: <xpath expr="//group[1]" position="attributes"> <attribute name= ...

  5. Luogu P4587 [FJOI2016]神秘数

    一道好冷门的好题啊,算是对于一个小结论和数据结构的一点考验吧 首先看完题目我们发现要从这个神秘数的性质入手,我们观察or手玩可得: 如果有\(x\)个\(1\),那么\([1,x]\)都是可以表示出来 ...

  6. openhtmltopdf 支持自定义字体、粗体

    一.支持自定义字体 private static void renderPDF(String html, OutputStream outputStream) throws Exception { t ...

  7. [SHOI2008]cactus仙人掌图[圆方树+树dp]

    题意 求仙人掌的直径(相距最远的两个点的距离). \(n\le 5\times 10^4​\) 分析 建立圆方树,讨论答案路径的 lca 在圆点还是方点. 利用树形 dp 求出每个圆点到 不同子树内圆 ...

  8. asp.net mvc 实现上传文件带进度条

    本文乃是博主早期写的,此种思路虽然实现了,但固然不是最好的,仅做参考学习. 可以用js onprogress .fileinput .webuploader.jq ajaxsubmit等实现 思路:a ...

  9. ElasticSearch实践系列(一)：安装

    Elasticsearch简介 Elasticsearch是一个高度可扩展的开源全文搜索和分析引擎.它允许您快速,近实时地存储,搜索和分析大量数据.它通常用作底层引擎/技术,为具有复杂搜索功能和要求的 ...

  10. gerrit代码简单备份方案分享

    由于前期部署了gerrit代码审核系统,开发调整后的线上代码都放到gerrit上,这就要求我们要保证代码的安全.所以,对gerrit代码的备份至关重要! 备份的策略是:1)先首次将gerrit项目代码 ...