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.

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title>React Lesson 5: Using Refs to Access Components</title>
  6. </head>
  7. <body>
  8.  
  9. <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.12.2/react.js"></script>
  10. <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.12.2/JSXTransformer.js"></script>
  11. <script type="text/jsx">
  12.  
  13.     var React_app = React.createClass({
  14.         getInitialState: function() {
  15.             return {
  16.                 red: 128,
  17.                 green: 128,
  18.                 blue: 128
  19.             }
  20.         },
  21.         myUpdate: function(){
  22.             this.setState({
  23.                 red: this.refs.red.getDOMNode().value,
  24.                 green: this.refs.green.getDOMNode().value,
  25.                 blue: this.refs.blue.getDOMNode().value
  26.             });
  27.         },
  28.         render: function() {
  29.             return (
  30.                  <div>
  31.                      <Silder update={this.myUpdate} ref="red"></Silder><label>{this.state.red}</label><br/>
  32.                      <Silder update={this.myUpdate} ref="green"></Silder><label>{this.state.green}</label><br/>
  33.                      <Silder update={this.myUpdate} ref="blue"></Silder><label>{this.state.blue}</label><br/>
  34.                  </div>
  35.             );
  36.         }
  37.     });
  38.  
  39.     var Silder = React.createClass({
  40.         render: function(){
  41.             return (
  42.                  <input type="range" min="0" max="255"  onChange={this.props.update}/>
  43.             )
  44.         }
  45.     });
  46.  
  47.     React.render(<React_app />, document.body);
  48. </script>
  49. </body>
  50. </html>

Here we use getDOMNode() to get the html node:

  1.  <Silder update={this.myUpdate} ref="red"></Silder>

then get value from it:

  1. this.refs.red.getDOMNode().value

But, if we add a div:

  1.     var Silder = React.createClass({
  2.         render: function(){
  3.             return (
  4.                <div>  <!--  added  -->
  5.                  <input type="range" min="0" max="255"  onChange={this.props.update}/>
  6.                </div>  <!--  added  -->
  7.             )
  8.         }
  9.     });

We found it doesn't work.

The way can solve this problem is by adding another ref to the input element:

  1.     var Silder = React.createClass({
  2.         render: function(){
  3.             return (
  4.                <div >
  5.                  <input type="range" min="0" max="255" ref="range" onChange={this.props.update}/>
  6.                </div>
  7.             )
  8.         }
  9.     });
  1.         myUpdate: function(){
  2.             this.setState({
  3.                 red: this.refs.red.refs.range.getDOMNode().value,
  4.                 green: this.refs.green.refs.range.getDOMNode().value,
  5.                 blue: this.refs.blue.refs.range.getDOMNode().value
  6.             });
  7.         },

[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. mjpg-streamer on raspberrypi

    http://sourceforge.net/projects/mjpg-streamer/ svn address svn checkout svn://svn.code.sf.net/p/mjpg ...

  2. 第十章Composite设备

    10.1 Composite设备介绍 USB的Composite类是USB 复合设备类,一个USB设备具有多种设备功能,比如一个USB设备同时具有鼠标和键盘功能.单一的USB设备开发相对简单,但在很多 ...

  3. hdu4722Good Numbers(dp)

    链接 这题规律其实挺明显的 打表找规律估计都可以 正规点就是DP 算出第N位所包含的good number的数量 如果给出的数是N+1位 就枚举各位上比原来小的数 加上下一位的dp值 一个i写成g了 ...

  4. c程序设计语言_习题1-18_删除输入流中每一行末尾的空格和制表符，并删除完全是空格的行

    Write a program to remove all trailing blanks and tabs from each line of input, and to delete entire ...

  5. sqliteExpert软件使用（创建数据库和表）

    sqliteExpert是sqlite数据库的可视化操作软件,通过该软件可以进行可视化的创建数据库以及表,免去了复杂的建表语句.首先在下面地址下载该软件http://www.ddooo.com/sof ...

  6. epub-2格式电子书剖析之一：文档构成

    epub格式电子书遵循IDPF推出的OCF规范,OCF规范遵循ZIP压缩技术,即epub电子书本身就是一个ZIP文件,我们将epub格式电子书的后缀.epub修改为.zip后,可以通过解压缩软件(例如 ...

  7. c#中字符串截取使用的方法

    AndyZhang welcome to java world c#中字符串截取使用的方法 String substring(int beginIndex) String substring(int ...

  8. [Bhatia.Matrix Analysis.Solutions to Exercises and Problems]Contents

    I find it may cost me so much time in doing such solutions to exercises and problems....I am sorry t ...

  9. mysql服务启动 但端口未监听

    mysql 启动了,用 localhost 可以连接,但是用 127.0.0.1 不能连接.可能的原因是 1. mysql为了增强安全性而跳过了端口监听,查看方法: 用mysql> SHOW V ...

  10. modsecookie

    Cookie parsing added添加cookie解析 现在你可以使用新的可选的过滤器变量(COOKIE_name, COOKIE_NAMES, COOKIE_VALUES)分析cookies. ...