其他分享
首页 > 其他分享> > react父组件通过点击调取子组件的方法实现传值

react父组件通过点击调取子组件的方法实现传值

作者:互联网

父组件
这里的onRef就是我需要用到的

<Search 
  onRef={this.onRef}
  selectRemove={this.selectRemove} 
  selectChange={this.selectChange}  
  searchList={this.state.searchList}  
/>
//Ref指向子组件
onRef = (ref) => {
	//因为我这里的组件是Search 这个就是组件的名字
   this.Search = ref
}
//点击事件,触发子组件的buttonClick事件
testClick = () => {
    this.Search.buttonClick('查询')
}

子组件

//切记这里this.props.onRef是必须要的
componentDidMount(){
    this.props.onRef(this)
    console.log(this.props,'1111')
 }
 buttonClick(name){
    //根据name做操作  
    alert("操作成功")
 }

附上截图
父组件
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

标签:Search,buttonClick,react,props,组件,ref,传值,onRef
来源: https://blog.csdn.net/Benz_s600/article/details/113351223