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的更多相关文章

  1. [React Fundamentals] Using Refs to Access Components

    When you are using React components you need to be able to access specific references to individual ...

  2. [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 ...

  3. 在 React 组件中使用 Refs 指南

    原文:Fullstack React's Guide to using Refs in React Components作者:Yomi Eluwande译者:博轩 译文:https://segment ...

  4. [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 ...

  5. 【React】282- 在 React 组件中使用 Refs 指南

    英文:Yomi Eluwande  译文:joking_zhang https://segmentfault.com/a/1190000019277029 使用 React 时,我们的默认思维方式应该 ...

  6. [React] react+redux+router+webpack+antd环境搭建一版

    好久之前搭建的一个react执行环境,受历史影响是webpack3.10.0和webpack-dev-server2.7.1的环境,新项目准备用webpack4重新弄弄了,旧的记录就合并发布了(在没有 ...

  7. React/React Native 的ES5 ES6写法对照表

    //es6与es5的区别很多React/React Native的初学者都被ES6的问题迷惑:各路大神都建议我们直接学习ES6的语法(class Foo extends React.Component ...

  8. 问题-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 ...

  9. React/React Native 的ES5 ES6写法对照表－b

    很多React/React Native的初学者都被ES6的问题迷惑:各路大神都建议我们直接学习ES6的语法(class Foo extends React.Component),然而网上搜到的很多教 ...

随机推荐

  1. TSS 任务状态段 详解

    http://blog.163.com/di_yang@yeah/blog/static/86118492201222210725146/1 什么是TSS TSS 全称task state segme ...

  2. HTTP Header 入门详解

    什么是HTTP Headers HTTP是"Hypertext Transfer Protocol"的所写,整个www都在使用这种协定,几乎你在流览器里看到的大部分内容都是通过ht ...

  3. Emmet（前身是zen coding）介绍和使用

    Zen coding - 一种快速编写HTML/CSS代码的方法.它使用仿CSS选择器的语法来快速开发HTML和CSS - 由Sergey Chikuyonok开发. 现在它改名为了Emmet,并且搭 ...

  4. 启动Activity时显示空白界面的问题

    问题描述: 启动activity时,先显示一个空白的界面,带标题栏的,1秒左右的时间后才显示activity对应 layout上的内容. 解决办法: 将activity的windows设置为透明的就可 ...

  5. net中System.Security.Cryptography 命名空间 下的加密算法

    .net中System.Security.Cryptography命名空间 在.NETFramework出现之前,如果我们需要进行加密的话,我们只有各种较底层的技术可以选择,如 Microsoft C ...

  6. 【HDOJ】1171 Big Event in HDU

    母函数,先要算搞清楚组合数可能的最大值.非常大.N种设备的最大VAL*最大数量. #include <stdio.h> #include <string.h> #define ...

  7. 【HDOJ】1258 Sum It Up

    典型的深搜,剪枝的时候需要跳过曾经搜索过的相同的数目,既满足nums[i]=nums[i-1]&&visit[i-1]==0,visit[i-1]==0可以说明该点已经测试过. #in ...

  8. Oracle系列之表空间

    涉及到表的处理请参看原表结构与数据  Oracle建表插数据等等 创建表空间等等 select tablespace_name from dba_tablespaces;--dba权限用户查询数据库中 ...

  9. C#排序算法的比较

    首先通过图表比较不同排序算法的时间复杂度和稳定性. 排序方法 平均时间 最坏情况 最好情况 辅助空间 稳定性 直接插入排序 O(n2) O(n2) O(n) O(1) 是 冒泡排序 O(n2) O(n ...

  10. windows播放声音

    一般播放MP3常见的有两种方法,一种是自己解码,另外一种用系统的库,比如MCI,当然如果可以用控件直接用个控件会更方便. 1.      使用mci #include <windows.h> ...