从父组件获取子组件的值或方法:
下面用一个父组件(Father.js)和子组件(Child.js)来演示如何能拿到值和方法:
方法一:
给子组件添加属性 ref=‘childData’
<Child ref='childData'></Child>
然后在父组件用 this.refs.childData.xxx 的方式拿值
alert(this.refs.childData.state.sonmsg);//拿到子组件中state中的值
this.refs.childData.run();//拿到子组件中runn方法
方法二:
给子组件添加 onRef={(ref) => { this.child = ref; }}
<Child onRef={(ref) => { this.child = ref; }}></Child>
然后在子组件中添加生命周期的 componentDidMount 这个方法:
componentDidMount() {
if (this.props.onRef) {
this.props.onRef(this);
}
}
然后在父组件用 this.child.xxx 的方式拿值
alert(this.child.state.sonmsg);
this.child.run();
方法三:
在父组件创建ref容器:this.pw = React.createRef()
constructor(props) {
super(props);
// 方法3:创建用来保存ref标识的标签对象的容器
this.pw = React.createRef()
}
然后给子组件添加属性:ref={this.pw}
<Child ref={this.pw}></Child>
然后就可以在父组件用 this.pw.current 拿到子组件值和方法:
alert(this.pw.current.state.sonmsg);
this.pw.current.run()