<!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. (4)top详解 (每周一个linux命令系列)

    (4)top详解 (每周一个linux命令系列) linux命令 top详解 引言:今天的命令是用来看cpu信息的top top 我们先看man top top - display Linux pro ...

  2. Arduino IDE for ESP8266 项目云盒子 （1）AP直接模式

    手机直接连接esp8266辐射的WIFI,通信. https://item.taobao.com/item.htm?spm=a230r.1.14.20.eYblO3&id=5219451024 ...

  3. Jmeter之mysql性能测试

    Jmeter官网地址:https://jmeter.apache.org/ 作为开发人员,必要的性能测试还是需要掌握的,虽然配置druid可以比较直观获得sql的执行时间,那些表被访问的比较多等等,但 ...

  4. python对word的操作

    from docx import Document from docx.shared import Inches document = Document() document.add_heading( ...

  5. Git-本地项目和远程项目关联

    此处记录将本地项目与码云仓库关联步骤 1. 本地 Git 配置 配置一下一些基本的信息 $ git config--global user.name "Your Name" $ g ...

  6. PAT A1109 Group Photo （25 分）——排序

    Formation is very important when taking a group photo. Given the rules of forming K rows with N peop ...

  7. Django 学习 （第五部）

    表设计: from django.db import models # Create your models here. # class Foo(models.Model): # name = mod ...

  8. CF1110E Magic Stones 差分

    传送门 将原数组差分一下,设\(d_i = c_{i+1} - c_i\) 考虑在\(i\)位置的一次操作会如何影响差分数组 \(d_{i+1}' = c_{i+1} - (c_{i+1} + c_{ ...

  9. JQuery加载html网页

    在ASP.NET MVC环境中,使用jQuery脚本去实现加载html网页. 一般情况之下,在ASP.NET MVC项目中,你不能在~/Views目录之下添加或是创建任何html为后缀的网页.但这也不 ...

  10. springboot启动后总是自己shutdown

    现象 这几天一直被一个问题困扰,每次springboot的tomcat启动之后, 然后过了一段时间看, 进程就突然自己关闭掉了. 然后日志是: ationConfigEmbeddedWebApplic ...