web-dev-qa-db-ja.com

子から親関数を呼び出す方法-react-native

問題の解決策を見つけるのに苦労していますが、どこにも見つかりません。だから私の質問は、子から親関数を呼び出す方法です。関数は子の内部でonPress = {（）}で渡される必要があります

Parent.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')   }

Child.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)

}

javascriptreactjsreact-nativereact-native-androidreact-native-ios
3
PandaMastr

これはよくある誤解なので、あなたは良い手にあります。

Propsを利用して、子への親関数の呼び出しを実行します。

当然、子供は親の機能をnot知っています。子コンポーネントで何かを実行し、それを親関数にバブルアップする必要がある場合は、関数を小道具として渡すだけです。

例

ParentComponent.js

_...

doSomething(x){
   console.log(x);
}

render(){
   return(
      <ChildComponent functionPropNameHere={this.doSomething}/>
   )
}
_

ChildComponent.js

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

関数someFunctionInChildComponent()を実行すると、Propと呼ばれるfunctionPropNameHereが呼び出され、親コンポーネントに移動してそこで関数が呼び出されます。この例では、入力xは_placeholder for x_になります。

8
Nikush

親レンダリング関数内

parentfunction(info){
   alert(info)
}


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

子の場合

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

親関数を小道具として子に渡す必要があります。 詳細はこちら

1
Carlos