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. 浅谈 echarts 用法

    对于服务型的公司来说,需要了解用户的使用趋势,来帮助分析市场的走向,所以说统计在一个管理后台中是必不可少的. 会用到echarts插件 ,其官网网址 http://echarts.baidu.com/ ...

  2. logging模块进阶

    python利用logging模块来记录日志主要涉及四个类 logger提供了应用程序可以直接使用的接口 handler将logger创建的日志提供的输出发送到指定目的地. filter起到过滤作用, ...

  3. iOS 音频视频制作

    --iOS多媒体 概览 随着移动互联网的发展,如今的手机早已不是打电话.发短信那么简单了,播放音乐.视频.录音.拍照等都是很常用的功能.在iOS中对于多媒体的支持是非常强大的,无论是音视频播放.录制, ...

  4. Tcl介绍和基础语法

    Tcl的背景 Tcl(读作tickle)诞生于80年代的加州大学伯克利分校,作为一种简单高效可移植性好的脚本语言,目前已经广泛应用在几乎所有的EDA工具中.Tcl 的最大特点就是其语法格式极其简单,采 ...

  5. liunx 修改IP地址

    1.安装centos系统,这里就不详细说明了. 2.进入到 vi /etc/sysconfig/network-scripts/ifcfg-eth0      后面的名称有些可能不同 其中,有些可能没 ...

  6. 世平信息(T 面试)

    1.跟我说下你们这个民主测评项目 在递归这一块扯了很久 2.遍历树结构,除了递归,还有什么方法? 3.如果数据库里面有2万条数据,你需要在前台用列表展示出来,有搜索功能.分页功能.总数:你觉得最需要优 ...

  7. DedeCMS文章标题长度最全修改方法

    有时候DedeCMS首页或者其他页面不能全部展示文章标题,造成读者阅读体验差.一般来说标题精简.概括性强.有本文关键词就是一个好标题.写软文不比写“作文”,也不是论坛的标题党,软文是用来做排名的,主要 ...

  8. java程序在一个电脑上只启动一次,只开一个进程

    方案1: 单进程程序可以用端口绑定.程序启动的时候可以尝试看该端口是否已经被占用,如果占用则程序已经启动. 方案2:你可以在java程序中创建一个隐藏文件,程序退出的时候删除这个文件.这样在程序启动的 ...

  9. 最短路 || POJ 1511 Invitation Cards

    已知图中从一点到另一点的距离,从1号点到另一点再从这一点返回1号点,求去到所有点的距离之和最小值 *解法:正着反着分别建图,把到每个点的距离加起来 spfa跑完之后dist数组就是从起点到每一点的最短 ...

  10. Sql Server 中锁的概念(2)

    1.一般大家都对事务的四种隔离模式比较熟悉,从松到严依次是: - 读取未提交(Read uncommitted):处于此模式下可能会出现脏读.幻象读.不可重复读 - 读取已提交(Read commit ...