React refs的使用

发布时间：2020-12-15 08:28:53 所属栏目：百科来源：网络整理

导读：React 支持一种非常特殊的属性 Ref ，你可以用来绑定到 render() 输出的任何组件上。这个特殊的属性允许你引用 render() 返回的相应的支撑实例（ backing instance ）。这样就可以确保在任何时间总是拿到正确的实例。使用方法如下： !DOCTYPE html html

React 支持一种非常特殊的属性Ref，你可以用来绑定到 render() 输出的任何组件上。

这个特殊的属性允许你引用 render() 返回的相应的支撑实例（ backing instance ）。这样就可以确保在任何时间总是拿到正确的实例。

使用方法如下：

<!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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!