[React] React Fundamentals: Using Refs to Access Components

<span><!</span><span>DOCTYPE html</span><span>></span>
<span><</span><span>html</span><span>></span>
<span><</span><span>head </span><span>lang</span><span>="en"</span><span>></span>
    <span><</span><span>meta </span><span>charset</span><span>="UTF-8"</span><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><span>body</span><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><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><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><span>div</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>red</span><span>"</span><span>><</span><span>/</span><span>Silder><label>{this.state.red}<</span><span>/</span><span>label</span><span>><</span><span>br</span><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><span>Silder><label>{this.state.green}<</span><span>/</span><span>label</span><span>><</span><span>br</span><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><span>Silder><label>{this.state.blue}<</span><span>/</span><span>label</span><span>><</span><span>br</span><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><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><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>Silder </span><span>update</span><span>={this.myUpdate} </span><span>ref</span><span>="red"</span><span>></</span><span>Silder</span><span>></span>

this.refs.red.getDOMNode().value

<span>    var Silder = React.createClass({
        render: function(){
            return (
               </span><span><</span><span>div</span><span>></span>  <span><!--</span><span>  added  </span><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>    var Silder = React.createClass({
        render: function(){
            return (
               </span><span><</span><span>div </span><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>

        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>