Как вызвать родительскую функцию от ребенка - реагировать на родной - PullRequest
0 голосов
/ 09 января 2019

Я изо всех сил пытаюсь найти решение моей проблемы, но я не могу найти его нигде. Поэтому мой вопрос заключается в том, как вызвать родительскую функцию от ребенка. Функция должна быть передана в 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)

}

Ответы [ 3 ]

0 голосов
/ 09 января 2019

В родительской функции визуализации

parentfunction(info){
   alert(info)
}


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

у ребенка

callparentfunction(){
this.props.functiontoPass('Hello from the child')
}
0 голосов
/ 09 января 2019

Это распространенное заблуждение, поэтому вы в хороших руках.

Вы собираетесь использовать Props для завершения вызова родительской функции для ребенка.

Естественно, ребенок знает , а не о функциях родителя. Когда вам нужно что-то сделать в дочернем Компоненте и передать это родительской функции, вам просто нужно передать функцию в качестве опоры.

Пример

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.

0 голосов
/ 09 января 2019

Вы должны передать родительскую функцию как опору ребенку. Подробнее здесь

...