前端之家收集整理的这篇文章主要介绍了
React refs的使用,
前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
React 支持一种非常特殊的属性Ref,你可以用来绑定到 render() 输出的任何组件上。
这个特殊的属性允许你引用 render() 返回的相应的支撑实例( backing instance )。这样就可以确保在任何时间总是拿到正确的实例。
使用方法如下:
@H_
301_37@
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<title>react
</title>
</head>
<body>
<script type="text/babel">
var MyComponent =
React.
createClass({
clickEvent:
function () {
/*this.refs.myInput.focus();*/ var input =
this.
refs.myInput.
getDOMNode();
input.
focus();
},
render:
function () {
return (
<div>
<input type="text" ref="myInput"/>
<input type="button" value="click me" onClick={
this.
clickEvent}
/>
</div>
);
}
});
ReactDOM.
render(
<MyComponent></MyComponent>,
document.
body );
</script>
<script src="http://static.runoob.com/assets/react/react-0.14.7/build/react.min.js"></script><!-- 核心库--> <script src="http://static.runoob.com/assets/react/react-0.14.7/build/react-dom.min.js"></script><!--提供与dom相关的功能--> <script src="http://static.runoob.com/assets/react/browser.min.js"></script><!--用于将JSX语法转为JavaScript语法--> </body>
</html>