react.js 给标识ref,获取内容
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,获取内容的更多相关文章
- React.js入门笔记(再续):评论框的实现
本案例来自React.js中文官网对应内容. 一. 运行环境 <link rel="stylesheet" type="text/css" href=&q ...
- React对比Vue(03 事件的对比,传递参数对比,事件对象,ref获取DOM节点,表单事件,键盘事件,约束非约束组件等)
import React from 'react'; class Baby extends React.Component { constructor (props) { super(props) t ...
- 六、React 键盘事件 表单事件 事件对象以及React中的ref获取dom节点 、React实现类似Vue的双向数据绑定
接:https://www.cnblogs.com/chenxi188/p/11782349.html 事件对象 .键盘事件. 表单事件 .ref获取dom节点.React实现类似vue双向数据绑定 ...
- React.js 小书 Lesson21 - ref 和 React.js 中的 DOM 操作
作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson21 转载请注明出处,保留原文链接和作者信息. 在 React.js 当中你基本不需要和 DO ...
- ref 和 React.js 中的 DOM 操作
在 React.js 当中你基本不需要和 DOM 直接打交道.React.js 提供了一系列的 on*方法帮助我们进行事件监听,所以 React.js 当中不需要直接调用 addEventListen ...
- react ref获取dom对象
react文档 step = React.createRef(); // init <div ref={this.step}></div> // bind componentD ...
- React 事件对象、键盘事件、表单事件、ref获取dom节点、react实现类似Vue双向数据绑定
1.案例实现代码 import React, { Component } from 'react'; /** * 事件对象.键盘事件.表单事件.ref获取dom节点.react实现类似Vue双向数据绑 ...
- React.js深入学习详细解析
今天,继续深入学习react.js. 目录: 一.JSX介绍 二.React组件生命周期详解 三.属性.状态的含义和用法 四.React中事件的用法 五.组件的协同使用 六.React中的双向绑定 ...
- React.js入门笔记
# React.js入门笔记 核心提示 这是本人学习react.js的第一篇入门笔记,估计也会是该系列涵盖内容最多的笔记,主要内容来自英文官方文档的快速上手部分和阮一峰博客教程.当然,还有我自己尝试的 ...
随机推荐
- python实战之爬取喜玛拉雅专辑信息
import urllib.request import json from lxml import etree url='http://www.ximalaya.com/dq/8.ajax' hea ...
- 014、BOM与DOM对象的应用
Screen屏幕对象 Width:屏幕的宽度 Height:屏幕的高度 availWidth:屏幕的有效宽度(不含任务栏) availHeight:屏幕的有效高度(不含任务栏) colorDepth: ...
- RPC之远程过程调用
一. 简介 将一个函数运行在远程计算机上并且等待获取那里的结果,这个称作远程过程调用(Remote Procedure Call)或者 RPC. RPC是一个计算机通信协议. 1. 类比: 将计算机服 ...
- 边框圆角值的问题、white-space、word-wrap、margin对布局的影响
1.边框圆角(border-radius)值的问题 border-radius : 7px 7px 7px 0; 四个值的顺序是左上.右上.右下.左下 2.white-space 规定段落中的文本不换 ...
- xutils3批量上传文件
前几天开发安卓要用到文件批量上传,就是上传图片,视频,文件之类的用到Xutil3框架,用 RequestParams params = new RequestParams(url); params.a ...
- JAVA设计模式--Strategy
策略模式就是说当我进行比较大小的时候定义一个策略的比较器Comparator,然后由具体的比较策略来决定用什么量来比较大小.
- phpstorm中快速添加函数注释
Preferences 或 command+,快捷键 Live Templates - PHP 下方 - 新建模板 ,Abbreviation 命名随便写,点击Edit Variables配置变量信息 ...
- windows session logoff时进行处理动作
目标:Windows session logoff时得到通知,进行一些记录/清理工作 测试平台: win7 x64 logoff时系统会发送WM_ENDSESSION消息,如果某个应用对这个消息的处理 ...
- 51nod 1096 距离之和最小(水题日常)
基准时间限制:1 秒 空间限制:131072 KB 分值: 20 难度:3级算法题 X轴上有N个点,求X轴上一点使它到这N个点的距离之和最小,输出这个最小的距离之和. Input 第1行:点的数量 ...
- x86和i386
x86: 1 9 7 8年6月,I n t e l公司推出了8 0 8 6,一个1 6位微处理器,它可访问的存储空间达到1 M B. Intel x86家族继续发展,1 9 8 5年出现了3 2位的3 ...