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