<!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. 双目SLAM(1) 总配置

    kitti 数据集   图像+相机参数 sgbm gpu     算深度 cuda sifi       算匹配点 rabsac         随机筛选 1)CUDA配置(自己配置)8.0 参考网页 ...

  2. python3 练习题 day01

    #练习题:'''1.简述变量命名规范'''#变量名由数字.字母.下划线组成#变量名可以字母和下划线开头,不能以数字开头,并且不能全为数字#变量名不能太长,且要有意义#最好使用驼峰或下划线格式命令#变量 ...

  3. 常用zookeeper命令

    服务管理 启动ZK服务: zkServer.sh start 查看ZK状态: zkServer.sh status 停止ZK服务: zkServer.sh stop 重启ZK服务: zkServer. ...

  4. 理解Express中间件

    阅读目录 一:body-parser中间件 二:cookie-parser中间件 三:express-session 中间件 四:理解使用morgan记录操作日志 回到顶部 一:body-parser ...

  5. Java：内省(Introspector)

    内省(Introspector) 是Java 语言对 JavaBean 类属性.事件的一种缺省处理方法. JavaBean是一种特殊的类,主要用于传递数据信息,这种类中的方法主要用于访问私有的字段,且 ...

  6. 浅析单点登录，以及不同二级域名下的SSO实现

    一家公司有多个产品线,就可能要有多个子域名,下头以baidu域名为例,a.baidu.com, b.baidu.com.com 是顶级域名,baidu 就是一个二级域名,a和b就是子域名. 当用户在a ...

  7. 在asp.net web form项目中添加webapi接口

    我有一个支付宝服务网关是ASP.NET WEB FORM项目,但是最近这个网关需要对外提供几个接口,想了下,使用web api比较合适,实现很简单,GO 1,首先添加一个文件夹名字叫App_Start ...

  8. HNOI2019 多边形 polygon

    HNOI2019 多边形 polygon https://www.luogu.org/problemnew/show/P5288 这题镪啊... 首先堆结论: 显然终止状态一定是所有边都连向n了 根据 ...

  9. 【JVM.11】Java内存模型与线程

    鲁迅曾经说过“并发处理的广泛应用是使得Amdahl定律代替摩尔定律成为计算机性能发展源动力的根本原因,也是人类‘压榨‘ 计算机运行能力的最有力武器.” 一.概述 多任务处理在现代计算机操作系统中几乎已 ...

  10. ant+Jacoco 统计tomcat远程部署后项目接口自动化测试或者功能测试代码覆盖率

    1.安装ant 环境,https://ant.apache.org/bindownload.cgi 2.下载jacoco包  https://www.eclemma.org/jacoco/ ,解压后, ...