React中子组件函数内调用父组件回调Prop无效问题求助

我懂你现在的困扰：想在子组件的自定义函数里调用父组件传过来的回调，同时还要执行自己的逻辑，但当前写法没达到预期效果。咱们来一步步搞定这个问题~

问题出在哪儿？ #

你当前的handle函数只是返回了父组件的回调函数本身，并没有真正触发它执行：

handle = () => { return this.props.DoLoggin; }

当按钮点击时，onPress会执行handle函数，但这个函数只是把DoLoggin函数引用返回出去，并没有调用它。而你直接写onPress={this.props.DoLoggin}时，相当于把函数引用传给了onPress，点击时React Native会自动执行这个函数，所以能生效。

正确的实现方式 #

你只需要在自定义的handle函数里主动调用父组件的回调即可，还可以在调用前后添加你需要的自动操作逻辑：

子组件修正后的代码 #

handle = () => {
  // 这里添加你想要自动执行的操作，比如状态更新、日志打印等
  console.log("子组件操作完成，准备通知父组件");
  
  // 调用父组件传过来的回调函数
  this.props.DoLoggin();
}

render(){
  return( <Button onPress={this.handle}><Text>Click</Text></Button> );
}

父组件代码保持不变 #

handler = ()=> { console.log('Logged In :)'); }
render(){
  return ( <Login DoLoggin={this.handler}/> );
}

这样点击按钮时，会先执行handle里的自定义逻辑，再触发父组件的handler函数，完美满足你的需求~

额外补充：如果需要传递参数怎么办？ #

要是你需要从子组件给父组件的回调传参数，也很简单：

• 父组件的回调接受参数：

handler = (userInfo) => { 
  console.log(`Logged In: ${userInfo.username}`); 
}

• 子组件的handle函数里传递参数：

handle = () => {
  const userInfo = { username: "Pooya" }; // 子组件中的数据
  this.props.DoLoggin(userInfo);
}

内容的提问来源于stack exchange，提问作者Pooya Behravesh