web-dev-qa-db-fra.com

Comment appeler une fonction mère d'un enfant - réactive-natif

J'ai du mal à trouver une solution à mon problème, mais je ne peux pas le trouver nulle part. Donc, ma question est de savoir comment appeler une fonction mère d'un enfant. La fonction doit être transmise dans un ONPRESS = {()} à l'intérieur de l'enfant

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

enfant.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
6
PandaMastr

C'est une mauvaise compréhension courante, alors vous êtes de bonnes mains.

Vous allez utiliser Props pour accomplir une fonction mère à un enfant.

Naturellement, l'enfant sait non des fonctions du parent. Lorsque vous devez faire quelque chose dans le composant enfant, et la bulle jusqu'à la fonction mère, il vous suffit de passer la fonction comme un accessoire.

( exemple

parentcomponent.js

...

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

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

Enfantcomponent.js

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

Lorsque vous exécutez la fonction someFunctionInChildComponent(), il appellera le Prop appelé functionPropNameHere qui se déplace ensuite sur le composant parent pour appeler la fonction là-bas. L'entrée x sera placeholder for x Dans cet exemple.

8
Nikush

dans la fonction de rendu parent

parentfunction(info){
   alert(info)
}


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

chez l'enfant

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