[React] React Fundamentals: Using Refs to Access Components

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.

 

<span><span>DOCTYPE html</span><span>></span>
<span><span>html</span><span>></span>
<span><span>head </span><span>lang</span><span>="en"</span><span>></span>
    <span><span>meta </span><span>charset</span><span>="UTF-8"</span><span>></span>
    <span><span>title</span><span>></span>React Lesson 5: Using Refs to Access Components<span></span><span>title</span><span>></span>
<span></span><span>head</span><span>></span>
<span><span>body</span><span>></span>

<span><span>script </span><span>src</span><span>="https://cdnjs.cloudflare.com/ajax/libs/react/0.12.2/react.js"</span><span>></span><span>script</span><span>></span>
<span><span>script </span><span>src</span><span>="https://cdnjs.cloudflare.com/ajax/libs/react/0.12.2/JSXTransformer.js"</span><span>></span><span>script</span><span>></span>
<span><span>script </span><span>type</span><span>="text/jsx"</span><span>></span>

    <span>var</span><span> React_app </span><span>=</span><span> React.createClass({
        getInitialState: </span><span>function</span><span>() {
            </span><span>return</span><span> {
                red: </span><span>128</span><span>,
                green: </span><span>128</span><span>,
                blue: </span><span>128</span><span>
            }
        },
        myUpdate: </span><span>function</span><span>(){
            </span><span>this</span><span>.setState({
                red: </span><span>this</span><span>.refs.red.getDOMNode().value,
                green: </span><span>this</span><span>.refs.green.getDOMNode().value,
                blue: </span><span>this</span><span>.refs.blue.getDOMNode().value
            });
        },
        render: </span><span>function</span><span>() {
            </span><span>return</span><span> (
                 </span><span><span>div</span><span>></span>
                     <span><span>Silder update</span><span>=</span><span>{</span><span>this</span><span>.myUpdate} ref</span><span>=</span><span>"</span><span>red</span><span>"</span><span>><span>/</span><span>Silder><label>{this.state.red}<span>/</span><span>label</span><span>><span>br</span><span>/</span><span>></span>
                     <span><span>Silder update</span><span>=</span><span>{</span><span>this</span><span>.myUpdate} ref</span><span>=</span><span>"</span><span>green</span><span>"</span><span>><span>/</span><span>Silder><label>{this.state.green}<span>/</span><span>label</span><span>><span>br</span><span>/</span><span>></span>
                     <span><span>Silder update</span><span>=</span><span>{</span><span>this</span><span>.myUpdate} ref</span><span>=</span><span>"</span><span>blue</span><span>"</span><span>><span>/</span><span>Silder><label>{this.state.blue}<span>/</span><span>label</span><span>><span>br</span><span>/</span><span>></span>
                 <span><span>/</span><span>div></span>
<span>            );
        }
    });

    </span><span>var</span><span> Silder </span><span>=</span><span> React.createClass({
        render: </span><span>function</span><span>(){
            </span><span>return</span><span> (
                 </span><span><span>input type</span><span>=</span><span>"</span><span>range</span><span>"</span><span> min</span><span>=</span><span>"</span><span>0</span><span>"</span><span> max</span><span>=</span><span>"</span><span>255</span><span>"</span><span>  onChange</span><span>=</span><span>{</span><span>this</span><span>.props.update}</span><span>/</span><span>></span>
<span>            )
        }
    });

    React.render(</span><span><span>React_app </span><span>/</span><span>>, document.body);</span>
<span></span><span>script</span><span>></span>
<span></span><span>body</span><span>></span>
<span></span><span>html</span><span>></span></span></span></span></span></label></span></span></span></span></label></span></span></span></span></label></span></span></span></span></span></span></span></span></span></span></span></span></span>

 

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

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

then get value from it:

this.refs.red.getDOMNode().value

 

But, if we add a div:

<span>    var Silder = React.createClass({
        render: function(){
            return (
               </span><span><span>div</span><span>></span>  <span><!--</span><span>  added  </span><span>--></span>
                 <span><span>input </span><span>type</span><span>="range"</span><span> min</span><span>="0"</span><span> max</span><span>="255"</span><span>  onChange</span><span>={this.props.update}</span><span>/></span>
               <span></span><span>div</span><span>></span>  <span><!--</span><span>  added  </span><span>--></span><span>
            )
        }
    });</span></span></span>

We found it doesn't work. 

 

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

<span>    var Silder = React.createClass({
        render: function(){
            return (
               </span><span><span>div </span><span>></span>
                 <span><span>input </span><span>type</span><span>="range"</span><span> min</span><span>="0"</span><span> max</span><span>="255"</span><span> ref</span><span>="range"</span><span> onChange</span><span>={this.props.update}</span><span>/></span>
               <span></span><span>div</span><span>></span><span>
            )
        }
    });</span></span></span>

        myUpdate: <span>function</span><span>(){
            </span><span>this</span><span>.setState({
                red: </span><span>this</span><span>.refs.red.refs.range.getDOMNode().value,
                green: </span><span>this</span><span>.refs.green.refs.range.getDOMNode().value,
                blue: </span><span>this</span><span>.refs.blue.refs.range.getDOMNode().value
            });
        },</span>