Не могу вызвать дочернюю функцию реквизита

Question

Я хочу вызвать функцию в родительском компоненте, когда кнопка нажата в дочернем компоненте,

class Home extends Component {
  constructor(props) {
    super(props);
    this.Quiz = this.getQuizpopup.bind(this); //Function I want to call 

    this.state = {
      latitude: LATITUDE,
    }

  };
}

А в дочернем компоненте я использую функцию для вызова следующим образом

<View>
  <Button onPress={this.props.Quiz()} buttonStyle={styles.buttonStyle} title="MpTest" />
</View>

Я получаю ошибку

Answer 1

Вы должны передать реквизит в качестве обратного вызова в дочернем компоненте, который при щелчке может вызвать вызов функции в родительском компоненте.

Ваш код должен выглядеть следующим образом:

class Home extends Component {
   constructor(props) {
     super(props);
     this.Quiz = this.getQuizpopup.bind(this); //Function I want to call 
     this.state = {
      latitude: LATITUDE,
     }
  }

  Quiz = () => {
    //button click handler.
  }

  render () {
     return (
        <Child
           onQuizButtonClick = {this.Quiz} />
     ) 
  }
}

и ввашему ребенку код должен быть:

  <Button onPress={() => this.props.onQuizButtonClick()} buttonStyle={styles.buttonStyle} title="MpTest" />

Надеюсь, это поможет.Happy Coding:)

Answer 2

вам нужно передать реквизиты для использования этой функции в вашем дочернем компоненте.

class Parent extends Component{
quiz = () => {
  //function you want to call
}
render(){
return(
  <Child quiz={this.quiz}> //passing quiz function as prop to child component 
)
}}