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)

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

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏编程

网页基础篇之如何制作简单的静态网页

每个人都有一个属于自己的星空 上一期介绍了sublime text3开发工具,那么接下来当然是开始了解代码。 一个静态网页大体由HTML, CSS和JavaSc...

6747
来自专栏代码世界

前端之HTML内容

一、HTML介绍 1、Web服务本质   当我们在浏览器中输入一个url后打开一个页面这个过程实质是一个网络编程中的sockt服务端接受指令并发送指令的一个过程...

3089
来自专栏JetpropelledSnake

Python入门之PyCharm的快捷键与常用设置和扩展(Win系统)

1.  PyCharm的快捷键 2 . PyCharm的常用设置和扩展 ------------------------------------------...

3904
来自专栏无原型不设计

Mockplus组件样式库一键解决风格复用

在Mockplus3.3版本中,新增了组件样式库,可以快速复用组件风格,同时可以将组件风格保存到库中。

24210
来自专栏程序员宝库

Chrome 浏览器必知必会的小技巧

来源:FEWY https://segmentfault.com/a/1190000012143176 说明 这篇文章主要介绍的就是一些chrome浏览器的小技...

4828
来自专栏python3

tkinter -- RadioButton

Radiobutton 为单选按钮,即在同一组内只能有一个按钮被选中,每当选中组内的一个按钮时,其它的按钮自动改为非选中态,与其他控件不同的是:它有组的概念

851
来自专栏极乐技术社区

微信小程序左右滑动切换图片酷炫效果(附效果)

开门见山,先上效果吧!感觉可以的用的上的再往下看。

7086
来自专栏KaliArch

搭建高可用MongoDB集群(Replica set)

MongoDB基础可参考http://blog.51cto.com/kaliarch/2044423

2K10
来自专栏林德熙的博客

win10 uwp ApplicationView

本文和大家介绍一个重要的类,他可以用来设置窗口,如设置启动大小,设置是否允许截图,是否进入全屏,所有和窗口有关的,都可以在他这里设置。

872
来自专栏Android Note

Android O:使用自定义字体资源

1433

扫码关注云+社区

领取腾讯云代金券