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