[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),然而网上搜到的很多教 ...
随机推荐
- java 对象 类 知识点 概览
第30集 面向对象,核心是对象,以对象来思考
- yii
2008年出现的一个以php为基础的框架,特点是:高性能框架.代码重用性.速度非常快(改完代码后直接刷新就可以展示修改后的页面).有小物件.登录组件.日志组件等等. main.php配置与数据库相连的 ...
- configure文件中判断某函数或库是否存在的一个方法
echo " #include<stdio.h> #include<openssl/ssl.h> int main() { return 0; } " &g ...
- Spring事务传播机制
Spring在TransactionDefinition接口中规定了7种类型的事务传播行为,它们规定了事务方法和事务方法发生嵌套调用时事务如何进行传播,即协调已经有事务标识的方法之间的发生调用时的事务 ...
- IPv6 tutorial 3 New features: IPsec and LAN features
https://4sysops.com/archives/ipv6-tutorial-part-3-new-features-ipsec-and-lan-features/ In the last p ...
- hdu4705Y
链接 这题可以算树形DP吧 树上的递推 对于树上的某个节点 反着算比较好做 就是算有多少有simple路径的 固定某个节点u 另两个节点 有两种取法 1.从不同子树里各选一个 2.从所有子树里选一个 ...
- mapreduce实现"浏览该商品的人大多数还浏览了"经典应用
输入: 日期 ...cookie id. ...商品id.. xx xx xx 输出: 商品id ...
- mapreduce实现全局排序
直接附代码,说明都在源码里了. package com.hadoop.totalsort; import java.io.IOException; import java.util.ArrayList ...
- WordPress Suco Themes ‘themify-ajax.php’任意文件上传漏洞
漏洞名称: WordPress Suco Themes ‘themify-ajax.php’任意文件上传漏洞 CNNVD编号: CNNVD-201311-403 发布时间: 2013-11-28 更新 ...
- iPhone丢失后通过iccid找回流程
切记,丢失IPHONE第一时间要去补卡,免得小偷刷机用你的卡激活,这样你查到的号码只会是你自己的号码找iphone有2个方法:ICCID和维修换机.两者之间没任何直接联系,请不要混淆!下面是总体流程图 ...