5
votes

Comment appeler une fonction parent depuis un enfant - React-Native

J'ai du mal à trouver une solution à mon problème, mais je ne la trouve nulle part. Ma question est donc de savoir comment appeler une fonction parent à partir d'un enfant. La fonction doit être passée dans un onPress = {()} à l'intérieur de l'enfant

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

}


1 commentaires

Veuillez montrer votre code complet, la partie dans laquelle vous incluez le composant enfant dans votre composant parent.


3 Réponses :


1
votes

Vous devez passer la fonction parent comme accessoire à l'enfant. Plus d'informations ici


0 commentaires

2
votes

Dans la fonction de rendu parent

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

Dans l'enfant

parentfunction(info){
   alert(info)
}


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

p>


0 commentaires

13
votes

C'est un malentendu courant, vous êtes donc entre de bonnes mains.

Vous allez utiliser des Props pour accomplir l'appel d'une fonction parent à un enfant.

Naturellement, l'enfant ne connaît pas les fonctions du parent. Lorsque vous avez besoin de faire quelque chose dans le composant enfant, et de le faire remonter à la fonction parent, il vous suffit de passer la fonction comme accessoire.

Exemple < / / / pre> XXX

Lorsque vous exécutez la fonction someFunctionInChildComponent () , elle appellera le Prop appelé functionPropNameHere qui se déplace ensuite au composant parent pour y appeler la fonction. L'entrée x sera espace réservé pour x dans cet exemple.


2 commentaires

Oui, vous avez répondu à ma question. Salut mon pote!


c'est une conception horrible de la part du natif de réaction! Cela n'aide pas vraiment lorsque vous avez des applications complexes telles que des écrans contenant des composants et fournissant également diverses fonctions utilitaires pour les fenêtres contextuelles, etc.