React Refs详解
2018-10-05 15:16
274 查看
初心-杨瑞超个人博客诚邀您加入qq群(IT-程序猿-技术交流群):757345416
React 支持一种非常特殊的属性 Ref ,你可以用来绑定到 render() 输出的任何组件上。这个特殊的属性允许你引用 render() 返回的相应的支撑实例( backing instance )。这样就可以确保在任何时间总是拿到正确的实例。
使用方法
绑定一个 ref 属性到 render 的返回值上:
<input ref="myInput" />
在其它代码中,通过 this.refs 获取支撑实例:
var input = this.refs.myInput; var inputValue = input.value; var inputRect = input.getBoundingClientRect();
完整实例
你可以通过使用 this 来获取当前 React 组件,或使用 ref 来获取组件的引用,实例如下:
class MyComponent extends React.Component { handleClick() { // 使用原生的 DOM API 获取焦点 this.refs.myInput.focus(); } render() { // 当组件插入到 DOM 后,ref 属性添加一个组件的引用于到 this.refs return ( <div> <input type="text" ref="myInput" /> <input type="button" value="点击输入框获取焦点" onClick={this.handleClick.bind(this)} /> </div> ); } } ReactDOM.render( <MyComponent />, document.getElementById('example') );
文章到此结束,希望对你的学习有帮助,部分资源来源于网络,如有侵权,请联系作者,立即删除。
阅读更多相关文章推荐
- React组件refs的使用详解
- React组件refs详解
- ReactNative WebView组件详解
- vue中$refs的用法及作用详解
- ReactNative WebView组件详解
- react-navigation 使用详解
- 详解React+Koa实现服务端渲染(SSR)
- React总结(四)-- refs和forceUpdate
- 详解React中setState回调函数
- 详解react-native-fs插件的使用以及遇到的坑
- React在开发中的常用结构以及功能详解
- React源码分析5 -- 组件通信,refs,key,ReactDOM
- 详解React-Todos入门例子
- 详解使用create-react-app添加css modules、sasss和antd
- react native RefreshControl 使用详解
- React-Native之Android(6.0及以上)权限申请详解
- ReactJS组件的生命周期详解
- React 实践心得:react-redux 之 connect 方法详解
- react-native新导航组件react-navigation详解
- React中的refs的使用教程