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. 设置Tomcat的UTF-8编码

    利用request.setCharacterEncoding("UTF-8");来设置Tomcat接收请求的编码格式,只对POST方式提交的数据有效,对GET方式提交的数据无效! ...

  2. [杂题]CSUOJ1413 Area of a Fractal

    题目链接 题意:题中给了图,所以不看字大概也知道  求的是第n个图形的面积. 就是找规律 递推 一类的... 先给结论: 很鬼畜的公式:    $\displaystyle\frac{3\times ...

  3. code forces Jeff and Periods

    /* * c.cpp * * Created on: 2013-10-7 * Author: wangzhu */ #include<cstdio> #include<iostrea ...

  4. Android ImageButton | Button | TextView 点击和触摸效果

    ImageButton------------------------------------------------> 一.Java  代码: 在drawable目录下添加新的xml文件 bu ...

  5. misc_register、 register_chrdev 的区别总结

    参考: http://longer.spaces.eepw.com.cn/articles/article/item/60415 http://imganquan.org/blog/?p=350 网上 ...

  6. 用 C# 读取二进制文件

    当想到所有文件都转换为 XML时,确实是一件好事.但是,这并非事实.仍旧还有大量的文件格式不是XML,甚至也不是ASCII.二进制文件仍然在网络中传播,储存在磁盘上,在应用程序之间传递.相比之下,在处 ...

  7. js中字符串转换为日期和比较大小

    本文转载于:http://yun342173024.iteye.com/blog/1873756在做前端校验的时候,要做日期比较的校验,在js中把字符串转化为日期,一时之间还真不知道在js中怎么把一个 ...

  8. Bootstrap插件的使用

    昨天,我偶然间发现了它——BootStrap插件,它是一一套功能强大的前端组件.说起来,我跟这插件还真算得上有缘,我本来并不是去找这个插件的,我本来是找BootStarp Paginator这个分页插 ...

  9. 从头开始编写一个Orchard网上商店模块(1) - 介绍

    原文地址:http://skywalkersoftwaredevelopment.net/blog/writing-an-orchard-webshop-module-from-scratch-par ...

  10. LVS与其他负载均衡软件的区别

    有人在邮件列表问haproxy的作者为何haproxy无论是tcp模式还是http模式,能支撑的并发量都不是太大. Willy回答了这个问题.   Exactly. The difference is ...