如何从子函数调用父函数 - 反应原生

Question

我正在努力寻找解决问题的方法，但我在任何地方都找不到它。所以我的问题是如何从孩子调用父函数。该函数必须在子级内部的 onPress={（）} 中传递

家长.js

   constructor(props) {
    super(props);
    this.state = { loading: true };
    this.state = { active: 'active' };
    this.openDrawer = this.openDrawerButtonFunction.bind(this);
    this.callParent = this.callParent.bind(this)
       }
     callParent = () => {
     console.log('I am your father')   }

孩子.js

     <Avatar
      avatarStyle={{ height: 50 }}
      onPress={() => { this.onPressAvatar() }}
      source={require('../../assets/images/dav-r.jpeg')} />
      onPressAvatar = () => {
      console.log('press on avatar');
        this.props.callParent.bind(this)

}

Answer 1

这是一个常见的误解，所以你得到了很好的照顾。

您将利用Props来完成对子函数的调用。

当然，孩子不知道父母的功能。当你需要在子组件中做一些事情，并将其冒泡到父函数时，你只需要将函数作为道具传递。

例

父组件.js

...
doSomething(x){
   console.log(x);
}
render(){
   return(
      <ChildComponent functionPropNameHere={this.doSomething}/>
   )
}

子组件.js

someFunctionInChildComponent(){
   this.props.functionPropNameHere('placeholder for x');
}

当你运行函数someFunctionInChildComponent()时，它将调用名为functionPropNameHere的Prop，然后移动到父组件以调用那里的函数。在此示例中，将placeholder for x输入x。

Answer 2

在父渲染函数中

parentfunction(info){
   alert(info)
}

render(){
      return(
       //bla bla bla
       <Child functionToPass={this.parentfunction}/>
       //bla bla bla
      )
    }

在孩子身上

callparentfunction(){
this.props.functiontoPass('Hello from the child')
}

Answer 3

您必须将父函数作为道具传递给子函数。更多信息在这里

Answer 4

父级.js

function doSomething(info){
   console.log("Parent Function")
}
render(){
   return(
      <ChildComponent functionPropNameHere={doSomething()}/>
   )
}

孩子.js

function callparentfunction(){
props.functionPropNameHere()
}