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的第一篇入门笔记,估计也会是该系列涵盖内容最多的笔记,主要内容来自英文官方文档的快速上手部分和阮一峰博客教程.当然,还有我自己尝试的 ...
随机推荐
- spring boot druid mybatis多数据源
一.关闭数据源自动配置(很关键) @SpringBootApplication(exclude = { DataSourceAutoConfiguration.class }) 如果不关闭会报异常:o ...
- 编程挑战JavaScript进阶篇(慕课网题目)
编程挑战 现在利用之前我们学过的JavaScript知识,实现选项卡切换的效果. 效果图: 文字素材: 房产: 275万购昌平邻铁三居 总价20万买一居 200万内购五环三居 140万安家东三环 ...
- Android Platform Version 和 API Level对照
Platform Version API Level VERSION_CODE Notes Android 5.1 22 LOLLIPOP_MR1 Platform Highlights Androi ...
- iOS 音频视频制作
--iOS多媒体 概览 随着移动互联网的发展,如今的手机早已不是打电话.发短信那么简单了,播放音乐.视频.录音.拍照等都是很常用的功能.在iOS中对于多媒体的支持是非常强大的,无论是音视频播放.录制, ...
- 原创:四种Linux系统开机启动项优命令超给力超详细详解
老葵花哥哥又开课了 接下来是你们的齐天大圣孙悟空给你们带来的详细版Linux系统开机启动优化四种命令 第一种方法是很正常的 第二种有点难理解 第三种来自我的一个奇思妙想 本文档秉承 不要钱也不要臀部的 ...
- QT 学习笔记概述
以下笔记为在看书和实践的过程中的部分记录总结: 0. 窗口布局 1) 支持绝对布局和布局管理器布局; 2) 绝对布局不够灵活.无法自动调整大小,需要手动编写代码调整: 3) 布局管理器管理布局比较灵活 ...
- 图形学基础 | 实现OBJ文件的载入
1. tiny_obj_loader.h 的使用include这个头文件需要先定义一个宏 #define TINYOBJLOADER_IMPLEMENTATION#include "tiny ...
- 区间DP || HDU 6249 Alice’s Stamps
题意:标号为1-n的n种邮票,m个邮票集,每个集里有标号从Li到Ri的邮票,要从中选K个邮票集,使这K个邮票集能覆盖最多种的邮票,问最多能覆盖多少种邮票 思路:区间DP (我:??? f[i][j]表 ...
- OpenCV2:第八章 视频操作
一.简介 OpenCV提供了专门操作视频的接口类VideoCapture类,可以从文件或摄像设备中读取视频
- vue.js中的表单radio,select,textarea的v-model属性的用法
只要是表单元素,其值已经不会再用value来定义了,但是placeholder还是可以用来设置默认值. section1--input:type="text" type=" ...