react父组件调用子组件方法
前期我们说了父子组件互相通过props传递数据的方法,这个应该都可以理解.
其实今天说的这个 父组件直接调用子组件方法, 也类似.
先看代码,比较直观.
import React, {Component} from 'react';
export default class Parent extends Component {
render() {
return(
<div>
<Child onRef={this.onRef} />
<button onClick={this.click} >click</button>
</div>
)
}
onRef = (ref) => {
this.child = ref
}
click = (e) => {
this.child.myName()
}
}
class Child extends Component {
componentDidMount(){
this.props.onRef(this)
}
myName = () => alert('xiaohesong')
render() {
return ('woqu')
}
}
上面点击按钮,会弹出子组件的输出.其实也很简单. 就是一个简单的方法,把子组件的参数回传到父组件中,并且赋值给子组件的一个实例方法.
有些场景是可能需要公用的,在父组件中统一调用子组件的方法.比如antd的form组件.只有各自子组件可以操作.
个人学习记录,欢迎watch&star
作者:xiaozhu_personal
来源:CSDN
原文:https://blog.csdn.net/hesonggg/article/details/79373565
版权声明:本文为博主原创文章,转载请附上博文链接!