react如何实现子传父

本文介绍了在React中如何实现子组件向父组件传递数据。通过父组件向子组件传递一个回调函数,子组件在该函数内部传入所需参数,从而达到子传父的效果。示例代码展示了如何定义和调用这个回调函数来传递子组件的formRef到父组件。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

我们都知道react是单向传递,所以我们碰到父传子之后还需子传父
这种情况该怎么办嘞?
这个时候我们其实可以先让父级页面传一个函数给子级页面,同时父组件的函数里面再携带一个参数,然后子级页面接收这个函数,并且在此函数内将想传给父级页面的参数放进去
让我们来看看代码是如何操作的

我这个是想把子级页面的formRef传给父页面

父组件

父组件先定义个对象,为了把子组件的formRef给父组件;
可以是对象,也可以是值,视情况而定
@ getRightForm ----这就是要传给子组件的函数

import Child from './Child.js';
constructor(props){
	super(props);
	this,state={
		rightForm:{},
	}
}

  // 传给子页面的函数,,,为了点击按钮 清空 搜索框
  getRightForm = form => {
    this.setState({ rightForm: form })
  }
//按照逻辑,这个是最后写的,但为了防止报错
//
const {rightForm} = this.state;
console.log(rightForm);   //子组件传过来的值,这一用了

//我是为了用它去清空搜索框的所有搜索内容,相当于重置了
//简单写了下,这个Button是从antd中取的
//@staffSpeak  这个是请求接口时定义的函数
//@ staffName 这个函数其实是 点击员工所有item时,请求聊天接口并渲染页面   其实这些可以不用写,具体看你怎么使用rightForm了
<Button onClick={()=>{this.staffSpeak(rightForm.resetFields(),this.staffName(id)}}>员工</Button>



//传值给子组件
<Child  getRightForm={this.getRightForm} />

子组件

—通过props取父组件传过来的函数 就是为了把子组件的formRef传给父组件使用

formRef = React.createRef();
componentDidMount(){
	const {getRightForm} =this.props;
	if(getRightForm){
		getRightForm(this.formRef.current)
	}
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值