import React,{Component} from 'react'
import ReactDOM from 'react-dom'
class App extends Component{
//给一个初始化状态
constructor(){
super();
this.state={
result:0
}
}
handChange=()=>{
//获取input a的类容,这个a就是我们给的标识ref="a"
let a=this.refs.a.value||0;
let b=this.refs.b.value||0;
//改变状态,更新视图
this.setState({result:parseFloat(a)+parseFloat(b)})
}
render(){
return (
<div>
<input type="text" ref="a" onChange={this.handChange}/>
+
<input type="text" ref="b" onChange={this.handChange}/>
<p>{this.state.result}</p>
</div>
)
}
} ReactDOM.render(<App/>,document.querySelector("#root"))

react.js 给标识ref,获取内容的更多相关文章

  1. React.js入门笔记(再续):评论框的实现

    本案例来自React.js中文官网对应内容. 一. 运行环境 <link rel="stylesheet" type="text/css" href=&q ...

  2. React对比Vue(03 事件的对比,传递参数对比,事件对象,ref获取DOM节点,表单事件,键盘事件,约束非约束组件等)

    import React from 'react'; class Baby extends React.Component { constructor (props) { super(props) t ...

  3. 六、React 键盘事件 表单事件 事件对象以及React中的ref获取dom节点 、React实现类似Vue的双向数据绑定

    接:https://www.cnblogs.com/chenxi188/p/11782349.html 事件对象 .键盘事件. 表单事件 .ref获取dom节点.React实现类似vue双向数据绑定 ...

  4. React.js 小书 Lesson21 - ref 和 React.js 中的 DOM 操作

    作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson21 转载请注明出处,保留原文链接和作者信息. 在 React.js 当中你基本不需要和 DO ...

  5. ref 和 React.js 中的 DOM 操作

    在 React.js 当中你基本不需要和 DOM 直接打交道.React.js 提供了一系列的 on*方法帮助我们进行事件监听,所以 React.js 当中不需要直接调用 addEventListen ...

  6. react ref获取dom对象

    react文档 step = React.createRef(); // init <div ref={this.step}></div> // bind componentD ...

  7. React 事件对象、键盘事件、表单事件、ref获取dom节点、react实现类似Vue双向数据绑定

    1.案例实现代码 import React, { Component } from 'react'; /** * 事件对象.键盘事件.表单事件.ref获取dom节点.react实现类似Vue双向数据绑 ...

  8. React.js深入学习详细解析

    今天,继续深入学习react.js. 目录: 一.JSX介绍 二.React组件生命周期详解 三.属性.状态的含义和用法 四.React中事件的用法 五.组件的协同使用 六.React中的双向绑定   ...

  9. React.js入门笔记

    # React.js入门笔记 核心提示 这是本人学习react.js的第一篇入门笔记,估计也会是该系列涵盖内容最多的笔记,主要内容来自英文官方文档的快速上手部分和阮一峰博客教程.当然,还有我自己尝试的 ...

随机推荐

  1. 05.NopCommerce给Topic表添加排序及类别字段

    在用到Nopcommerce中静态页面表时,发现Topic表没有排序字段和类别字段,导致如果Page文件很多的话,无法区分是哪个类别,为此我稍微扩展了一下字段,在此记录一下操作流程,方便以后自己查看, ...

  2. Log4net系列一:Log4net搭建之文本格式输出

    Log4net简介 前言 项目开发中,记录项目日志是必须的,如果非要说日志的重要性(日志可看做,飞机的黑匣子,或者汽车的行车记录仪),根据等级进行记录,方便我们排查相关问题,以后项目运维中,也方便很多 ...

  3. vue中的事件监听之——v-on vs .$on

    跟着视频中老师的教学视频学vue的时候,看很多时候都用@(v-on)来监听子级emit的自定义事件,但在bus总线那块,又用.$on来监听bus自身emit的事件,v-on之间似乎相似但又不同,今天对 ...

  4. SpringMvc之参数绑定注解详解

    引言: 前段时间项目中用到了REST风格来开发程序,但是当用POST.PUT模式提交数据时,发现服务器端接受不到提交的数据(服务器端参数绑定没有加任何注解),查看了提交方式为application/j ...

  5. docker 新手入门 (阿里镜像仓库的使用)

    创建镜像仓库后的步骤是:   https://help.aliyun.com/document_detail/60743.html?spm=a2c4g.11186623.6.546.79be52f3y ...

  6. dropdb - 删除一个现有 PostgreSQL 数据库

    SYNOPSIS dropdb [ option...] dbname DESCRIPTION 描述 dropdb 删除一个现有 PostgreSQL 数据库. 执行这条命令的人必须是数据库超级用户, ...

  7. run_debug和run_demo的区别

    run_demo:给一张图,直接生成测试出来的框,输入不用给gt框 run_debug:生成ap值,生成的图片既有gt框也有测试得到的结果框 run_demo的源码demo_test放在example ...

  8. python之道02

    猜数字,设定一个理想数字比如:66,让用户输入数字,如果比66大,则显示猜测的结果大了,然后继续让用户输入; 如果比66小,则显示猜测的结果小了,然后继续让用户输入;只有等于66,显示猜测结果正确,然 ...

  9. 基于HLS(HTTP Live Streaming)的视频直播分析与实现

    转自:http://www.cnblogs.com/haibindev/archive/2013/01/30/2880764.html HLS(HTTP Live Streaming)的分析: HTT ...

  10. 配置c3p0-config.xml数据库连接池,jdbcurl配置项报错Type The reference to entity "useUnicode" must end with the ';' delimiter.

    <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE xml> <c3p0-confi ...