[React]ReactFundamentals:UsingRefstoAccessComponents

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

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.

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

then get value from it:

this.refs.red.getDOMNode().value

But, if we add a div:

 var Silder = React.createClass({
 render: function(){
 return (
 
 
 
 
 
 )
 }
 });

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 (
 

 
 
 )
 }
 });

 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
 });
 },