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

• ref : 绑定属性

• refs : 调用的时候使用

调用子组件方法

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

建立组件

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

使用子组件

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

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

绑定ref属性

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

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

访问父组件方法

父组件Parent.js

class Parent extends React.Component{
  constructor(props){
    super(props);
    this.state = {
     value:""
    }
  }
  refresh(){
    // 这里箭头函数很重要
    return ()=>{
        this.setState({value:"这里是子组件调用的方法"})
    }
  }
  render(){
    return (
      <div>
        <h2>兄弟组件沟通</h2>
        <Brother refresh={this.refresh()}/>
        <p>{this.state.value}</p>
      </div>
    )
  }
}

ReactDOM.render(<Parent />,document.getElementById('app'));

子组件SubComponent.js

import React,{ Component } from 'react';
export default class SubComponent extends Component {
  constructor(props) {
    super(props);
  }
  subHandleClick(){
    this.setState({text: '文本被改变啦！哈哈！'})
  }
  render(){
    return(
      <div>
        <button onClick={this.props.refresh}>
            更新父组件
        </button>
      </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')
);

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!