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. delphi中formatFloat代码初探（在qt下实现floatformat的函数）

    由于项目需要,需要在qt下实现floatformat的函数.之前写过一个,但是写得不好.决定重新写一个,参考delphi xe2下的实现.把xe2下的相关代码都看了一遍,xe2的代码思路在这里贴出来. ...

  2. Android：DES加密

    private static final String KEY = "xxxxxx"; // KEY的字节长度必须超过24 public DESUtil(){ super(); } ...

  3. .NET之特性和属性

    1. 引言 attribute是.NET框架引入的有一技术亮点,因此我们有必要花点时间走进一个发现attribute登堂入室的入口.因为.NET Framework中使用了大量的定制特性来完成代码约定 ...

  4. Java实现人民币大写精讲

    想要实现人民币大写,在发票等场景中使用?? 1234.56显示为:壹仟贰佰叁拾肆元伍角陆分,那就往下看看吧! 本程序可以实现 0 到 9999 9999 9999.994 以内的人民币大写转换,精确到 ...

  5. Java金字塔及变形

    Java金字塔 package com.tfj.test; public class JinZiTa { public static void main(String[] args){ int num ...

  6. hdu4669Mutiples on a circle

    http://acm.hdu.edu.cn/showproblem.php?pid=4669 这题各种错误都来了一遍  预处理一下第一个数作为尾数与相邻前面的数组成的数的余数  然后再与后面的结合求余 ...

  7. poi大数据导入解决方法

    This one comes up quite a lot, but often the reason isn't what you might initially think. So, the fi ...

  8. 使用Spring MVC 的表单控制器SimpleFormController

    以注册过程为例,我们可能会选择继承AbstractController来实现表单的显示,继承AbstractCommandController来实现表单的处理 ,这样是可行的,但必须要维护两个控制器 ...

  9. java反编译工具

    由于JAVA语言安全性高.代码优化.跨平台等特性,从1995年5月由SUN公司发布后,迅速取代了很多传统高级语言,占据了企业级网络应用开发等诸多领域的霸主地位. 不过,JAVA最突出的跨平台优势使得它 ...

  10. NGINX(二)内存池

    ngxin中为了加快内存分配的速度,引入了内存池, 大块申请, 减少分配次数, 小块分割, 极大的提高了内存申请速度, 另外一个用途就是省去了很多内存管理的任务,因为这里没有提供内存释放的功能,也就是 ...