Rumah > Artikel > pangkalan data > [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>