React 父组件调用子组件函数
父组件代码
import React, { Component,Fragment } from 'react'
import TeamInfo from '../../component/TeamInfo'
export default class Team extends Component {
constructor (props){
super(props)
this.Child = React.createRef(); //// 创建一个ref去储存DOM子元素
this.getTeamList = this.getTeamList.bind(this)
}
showTeamInfoView(){
this.Child.current.show() //调用子元素函数 show (括号里可以传参)
}
render() {
return (
<Fragment>
<Button type="primary" className='btn' onClick={()=>{this.showTeamInfoView()}} icon={<PlusOutlined />}>新增</Button>
// ref 绑定子元素
<TeamInfo ref={this.Child}></TeamInfo>
</Fragment>
)
}
子组件代码
import React,{Component,Fragment} from 'react'
class TeamInfo extends Component{
constructor(props){
super(props)
this.show=this.show.bind(this)
}
show(){
console.log("被父元素调用的函数")
}
render(){
return(
<Fragment>
</Fragment>
)
}
}
export default TeamInfo

浙公网安备 33010602011771号