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

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

调用子组件方法

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

建立组件

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

使用子组件

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

render(){  
  return(    
    
  )
}

绑定ref属性

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

调用子组件方法

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

handleClick(){  
  
  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(      
      

        
        
      
    )
  }
}

ReactDOM.render(  
  , 
  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(      
      

        查看：{this.state.text}      
      
    )
  }
}

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

绑定 ref 属性

refs 获取DOM实例

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

import React, { Component } from 'react';
class MyComponent extends Component {
  handleClick(){    
    this.refs.myInput.focus();
  }
  render(){    
    return(      
      

        
        
      
    )
  }
}

ReactDOM.render(  
  , 
  document.querySelector('#app')
);