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. Java二维数组

    package com.test; public class Test { public static void main(String[] args) { // TODO Auto-generate ...

  2. ANDROID_MARS学习笔记_S02_005_AppWidget1

    一.AppWidget介绍 1.要在手机生成AppWidget需的东西 (1)AppWidgetProviderInfo a).res\xml\example_appwidget_info.xml b ...

  3. 【HDOJ】1171 Big Event in HDU

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

  4. Oracle Form Developer: Folder FRM-99999 Error 14212

    Question: 做FOLDER文件夹功能,打开FORM错误提示: FRM-99999:出现1412错误.有关该错误的详细信息,请参阅发行说明文件(relnotes) Answer: 原因是FOLD ...

  5. Codeforces Round #195 (Div. 2)

    记次CF吧 1题...B题..因为循环的i没设成long long 却参与了运算 结果就悲剧了 一直交 一直挂 ..上题 A 水.. 第一次少了个空格还.. #include <iostream ...

  6. c程序设计语言_习题7-6_对比两个输入文本文件_输出它们不同的第一行_并且要记录行号

    Write a program to compare two files, printing the first line where they differ. Here's Rick's solut ...

  7. 从头开始编写一个Orchard网上商店模块(5) - 创建和渲染ProductCatalog的内容类型

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

  8. 基于WebForm+EasyUI的业务管理系统形成之旅 -- 系统设置(Ⅰ)

    上篇<基于WebForm+EasyUI的业务管理系统形成之旅 -- 总体介绍>,主要介绍系统总体的界面效果和用户体验UI设计. 在MVC.MVP大行其道的今天,写WebForm该系列篇章, ...

  9. imdisk命令行使用及配置

    imdisk是一个开源的虚拟磁盘软件,集虚拟光驱,文件虚拟光驱,映射物理磁盘,映射物理内存等功能 如果使用devio--Device I/O Service,可以映射网络磁盘等. 通用于windows ...

  10. 【转+心得】WinDbg+VM9双机调试无法连接解决方案

    参考:http://www.52pojie.cn/forum.php?mod=viewthread&tid=203339 启动顺序为:先启动vmware里面的xp后(登录到桌面),再启动win ...