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. 【Xamarin挖墙脚系列：IOS-关于手机支持的屏幕方向】

    原文:[Xamarin挖墙脚系列:IOS-关于手机支持的屏幕方向] 设置支持的屏幕方向有两个级别,一个是app级别的,另一个是viewController级别的. app 级别的可以在［target］ ...

  2. 使用智遥工作流，优化SAP请购流程

    传统请购流程,都是用户在SAP系统中填写请购单,然后再打印出来,递交给上级领导审批.领导审批完了,再到SAP系统中更新release标识.若中途请购单内容需要变更,则需要重新打印,审批. 智遥工作流, ...

  3. Linux 线程优先级

    http://www.cnblogs.com/imapla/p/4234258.html http://blog.csdn.net/lanseshenhua/article/details/55247 ...

  4. 【HDOJ】3275 Light

    这就是个简单线段树+延迟标记.因为对bool使用了~而不是!,wa了一下午找不到原因. /* 3275 */ #include <iostream> #include <sstrea ...

  5. MVC——数据库增删改查(Razor)

    一.显示信息 .Models(模板) private MyDBDataContext _context = new MyDBDataContext(); //定义一个变量取出所有数据 public L ...

  6. BZOJ_1014_[JSOI2008]_火星人prefix_(Splay+LCP_Hash+二分)

    描述 http://www.lydsy.com/JudgeOnline/problem.php?id=1014 给出一个字符串,有修改,插入,以及询问LCP(i,j)的操作. 分析 LCP在白书上面有 ...

  7. 设置oracle11g空表exp导出

    1.Oracle11g默认对空表不分配segment,故使用exp导出Oracle11g数据库时,空表不会导出. 2.设置deferred_segment_creation 参数为FALSE后,无论是 ...

  8. [Tommas] SQL 中 WITH AS 的用法

    WITH AS短语,也叫做子查询部分(subquery factoring),可以让你做很多事情,定义一个SQL片断,该SQL片断会被整个SQL语句所用到: 下面的例子定义了一个 Temp 片段,Te ...

  9. linux 小技巧总结

    (1)linux判断文件是否存在 if [ -f filename]: then       ......#要执行的语句 fi 具体例子: file=/usr/local/oracle/oradata ...

  10. Camera图像处理原理及实例分析-重要图像概念

    Camera图像处理原理及实例分析 作者:刘旭晖  colorant@163.com  转载请注明出处 BLOG:http://blog.csdn.net/colorant/ 主页:http://rg ...