不能调用道具子功能

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 Parent extends Component{
quiz = () => {
  //function you want to call
}
render(){
return(
  <Child quiz={this.quiz}> //passing quiz function as prop to child component 
)
}}

Answer 2

您应该在子组件中传递一个prop作为回调，单击该子组件可以触发父组件中的函数调用。

您的代码应如下所示：

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" />

希望这会有所帮助。快乐编码：）