专栏首页埋名React的Refs方法获取DOM实例 和 访问子组件方法及属性

React的Refs方法获取DOM实例 和 访问子组件方法及属性

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

  • ref : 绑定属性
  • refs : 调用的时候使用

调用子组件方法

这是一个很神奇的方法refs,它可以调用子组件的方法以及属性。下面用一个例子来实现调用子组件方法。

建立组件

建立子组件MyComponent.js,并在子组件实现一个方法,如:subHandleClick,这个方法实现变更当前组件上面的文本,提供这样一个测试用例。

使用子组件

通过import SubComponent from './SubComponent'来引用子组件SubComponent,在 render方法中注册使用组件

render(){  
  return(    
    <SubComponent/>
  )
}

绑定ref属性

在子组件调用上面绑定一个值为subcomponents的属性refsubcomponents

<SubComponent ref="subcomponents" />

调用子组件方法

在入口父组件App.js中,添加方法handleClick,去调用子组件SubComponent.js中的subHandleClick方法

handleClick(){  
  //this.refs.subcomponents可以访问子组件的方法
  //也可以获取子组件的state...
  this.refs.subcomponents.subHandleClick();
}

完整实例

入口父组件App.js

import React, { Component } from 'react';
import SubComponent from './SubComponent'

class MyComponent extends Component {
  handleClick(){    
    this.refs.subcomponents.subHandleClick();
  }
  render(){    
    return(      
      <div>
        <input
          type="button"
          value="点我调用子组件方法"
          onClick={this.handleClick.bind(this)}
        />
        <SubComponent ref="subcomponents" />
      </div>
    )
  }
}

ReactDOM.render(  
  <MyComponent/>, 
  document.querySelector('#app')
);

子组件SubComponent.js

import React, { Component } from 'react';
export default class SubComponent extends Component {
  constructor(props) {
    super(props);    this.state = {
      text: '这里是初始化文本'
    };
  }
  subHandleClick(){    
    this.setState({text: '文本被改变啦!哈哈!'})
  }
  render(){    
    return(      
      <div>
        查看:{this.state.text}      
      </div>
    )
  }
}

获取DOM实例

通过ref属性,你可获取,实例中的属性方法,甚至可以通过他获取到DOM实例节点this.refs.myInput.getDOMNode()

绑定 ref 属性

<input type="text" ref="myInput" />

refs 获取DOM实例

获取支撑实例( backing instance )。这样就可以确保在任何时间总是拿到正确的实例。

// 输入框获取焦点
this.refs.myInput.focus()

完整实例

import React, { Component } from 'react';
class MyComponent extends Component {
  handleClick(){    
    this.refs.myInput.focus();
  }
  render(){    
    return(      
      <div>
        <input 
          type="text" 
          ref="myInput" 
        />
        <input
          type="button"
          value="点我输入框获取焦点"
          onClick={this.handleClick.bind(this)}
        />
      </div>
    )
  }
}

ReactDOM.render(  
  <MyComponent/>, 
  document.querySelector('#app')
);

本文分享自微信公众号 - JSdig(jsdigs),作者:埋名

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2016-08-13

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 推荐13个常用前端公共库CDN服务资源

    CDN公共库是指将常用的JS库存放在CDN节点,以方便广大开发者直接调用。与将JS库存放在服务器单机上相比,CDN公共库更加稳定、高速。 公共CDN能为您的应用...

    小弟调调
  • iNotify.js 2 实现浏览器的title闪烁滚动声音提示,弹出通知

    JS 实现浏览器的 title 闪烁、滚动、声音提示、chrome、Firefox、Safari等系统弹出通知。它没有依赖,压缩只有只有4.66kb(gzipp...

    小弟调调
  • CentOS7安装维护nginx从入门到精通

    Nginx 是一款面向性能设计的 HTTP 服务器,能反向代理 HTTP,HTTPS 和邮件相关(SMTP,POP3,IMAP)的协议链接。并且提供了负载均衡以...

    小弟调调
  • 一步一步教你使用AgileEAS.NET基础类库进行应用开发-WinForm应用篇-实例一个模块(商品字典)

            本文是一步一步教你使用AgileEAS.NET基础进行应用开发系统的WinForm应用篇的开篇,从本文起开始大家将看到一个距离真实应用非常接的开...

    魏琼东
  • Flutter基础widgets教程-CupertinoNavigationBar篇

    青年码农
  • java之StopWatch源码分析

    计时这个词语在生活中被应用的很普遍,体育竞赛时频繁出现的秒表,发令信号一经发出,秒表就在滴答滴答流转开始计时了,秒表此时的作用就是计时的代名词,在我们编写代码的...

    后端Coder
  • JS实现简易的计算器

    自认脑袋不够大,就实现一个普通版本的吧(支持正负数加减乘除等基本连续的运算,未提供括号功能)

    书童小二
  • Java的this和重载

    2、表示用类的成员变量,而非函数参数,注意在函数参数和成员变量同名是进行区分!其实这是第一种用法的特例,比较常用,所以那出来强调一下。

    用户5224393
  • 记一个复杂组件(Filter)的从设计到开发

    貌似在面试中,你如何设计一个 react/vue 组件,貌似已经是司空见惯的问题了。本文不是理论片,更多的是自己的一步步思考和实践。文中会有很多笔者的思考过程,...

    Nealyang
  • 【死磕Netty】-----服务端启动过程分析

    原文出处http://cmsblogs.com/ 『chenssy』 转载请注明原创出处,谢谢! 上篇博客(【死磕Netty】----Netty的核心组件及其设...

    用户1655470

扫码关注云+社区

领取腾讯云代金券