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

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

<SubComponent ref="subcomponents" />

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

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')
);

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>
    )
  }
}

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

// 输入框获取焦点
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')
);