[React] React Fundamentals: Using Refs to Access Components
When you are using React components you need to be able to access specific references to individual components. This is done by defining a ref.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>React Lesson 5: Using Refs to Access Components</title>
</head>
<body> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.12.2/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.12.2/JSXTransformer.js"></script>
<script type="text/jsx"> var React_app = React.createClass({
getInitialState: function() {
return {
red: 128,
green: 128,
blue: 128
}
},
myUpdate: function(){
this.setState({
red: this.refs.red.getDOMNode().value,
green: this.refs.green.getDOMNode().value,
blue: this.refs.blue.getDOMNode().value
});
},
render: function() {
return (
<div>
<Silder update={this.myUpdate} ref="red"></Silder><label>{this.state.red}</label><br/>
<Silder update={this.myUpdate} ref="green"></Silder><label>{this.state.green}</label><br/>
<Silder update={this.myUpdate} ref="blue"></Silder><label>{this.state.blue}</label><br/>
</div>
);
}
}); var Silder = React.createClass({
render: function(){
return (
<input type="range" min="0" max="255" onChange={this.props.update}/>
)
}
}); React.render(<React_app />, document.body);
</script>
</body>
</html>
Here we use getDOMNode() to get the html node:
<Silder update={this.myUpdate} ref="red"></Silder>
then get value from it:
this.refs.red.getDOMNode().value
But, if we add a div:
var Silder = React.createClass({
render: function(){
return (
<div> <!-- added -->
<input type="range" min="0" max="255" onChange={this.props.update}/>
</div> <!-- added -->
)
}
});
We found it doesn't work.
The way can solve this problem is by adding another ref to the input element:
var Silder = React.createClass({
render: function(){
return (
<div >
<input type="range" min="0" max="255" ref="range" onChange={this.props.update}/>
</div>
)
}
});
myUpdate: function(){
this.setState({
red: this.refs.red.refs.range.getDOMNode().value,
green: this.refs.green.refs.range.getDOMNode().value,
blue: this.refs.blue.refs.range.getDOMNode().value
});
},
[React] React Fundamentals: Using Refs to Access Components的更多相关文章
- [React Fundamentals] Using Refs to Access Components
When you are using React components you need to be able to access specific references to individual ...
- [React] React Fundamentals: Integrating Components with D3 and AngularJS
Since React is only interested in the V (view) of MVC, it plays well with other toolkits and framewo ...
- 在 React 组件中使用 Refs 指南
原文:Fullstack React's Guide to using Refs in React Components作者:Yomi Eluwande译者:博轩 译文:https://segment ...
- [React] Use React.cloneElement to Extend Functionality of Children Components
We can utilize React.cloneElement in order to create new components with extended data or functional ...
- 【React】282- 在 React 组件中使用 Refs 指南
英文:Yomi Eluwande 译文:joking_zhang https://segmentfault.com/a/1190000019277029 使用 React 时,我们的默认思维方式应该 ...
- [React] react+redux+router+webpack+antd环境搭建一版
好久之前搭建的一个react执行环境,受历史影响是webpack3.10.0和webpack-dev-server2.7.1的环境,新项目准备用webpack4重新弄弄了,旧的记录就合并发布了(在没有 ...
- React/React Native 的ES5 ES6写法对照表
//es6与es5的区别很多React/React Native的初学者都被ES6的问题迷惑:各路大神都建议我们直接学习ES6的语法(class Foo extends React.Component ...
- 问题-Error creating object. Please verify that the Microsoft Data Access Components 2.1(or later) have been properly installed.
问题现象:软件在启动时报如下错误信息:Exception Exception in module zhujiangguanjia.exe at 001da37f. Error creating obj ...
- React/React Native 的ES5 ES6写法对照表－b
很多React/React Native的初学者都被ES6的问题迷惑:各路大神都建议我们直接学习ES6的语法(class Foo extends React.Component),然而网上搜到的很多教 ...
随机推荐
- 环信_EaseUI 使用指南
EaseUI 使用指南 简介 EaseUI 封装了 IM 功能常用的控件(如聊天会话.会话列表.联系人列表).旨在帮助开发者快速集成环信 SDK. 源码地址: EaseUI:https://githu ...
- 找不到mysql服务或mysql服务名无效
问题原因:mysql服务没有安装. 解决办法: 在 mysql bin目录下 以管理员的权限 执行 mysqld -install命令 出现:Service successfully installe ...
- ANDROID_MARS学习笔记_S02_004_ExpandableListActivity
1.main.xml <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" x ...
- 164. Maximum Gap
题目: Given an unsorted array, find the maximum difference between the successive elements in its sort ...
- 基于CommentCoreLibrary简单的弹幕实现
本文地址:http://www.cnblogs.com/liaoyu/p/ccl-demo.html 实现基于开源的 CommentCoreLibrary 最近有需求要实现一个简单的评论弹幕实现,通过 ...
- Myeclipse开发内存溢出问题
MyEclipse开发内存溢出问题 window --> preferences --> MyEclipse --> servers --> Tomcat --> J ...
- C#中的@符号
C# 中的 @ 符号 C# 中的 @ 符号其实有很多的用法,我们来看看 @ 有什么神奇之处. 1. 限定字符串 用 @ 符号加在字符串前面表示其中的转义字符 “ 不 ” 被处理. 如果我们写一个文 ...
- C#中的ODBC、OLEDB连接
using System;using System.Collections.Generic;using System.Text;using System.Data.Odbc;using Syste ...
- poj1724ROADS（BFS）
链接 本来想写spfa 加点什么限制什么的可能就过了 写着写着就成裸BFS了 也没优化就水过了 #include <iostream> #include<cstdio> #in ...
- kernel_task占用大量CPU