如何调用两个函数onClick（）react / redux

Z时代
2024-01-10
分类：问答

我有一个component看起来像这样

class Test extends React.Component {
   onClick() {
       alert("I am a Component")
   }
render() { 
      const { fromContainer } = this.props
      return (
         <a href="#" onClick={ this.onClick }>Test Link</a>
      );
   }
}

在我container我连接Test到Store。我需要在上调用两个函数onClick。component本身定义的一个函数（onClick()与一起alert()，另一个函数fromContainer是action，正在通过reducer等）。

如何使fromContainer组件知道该功能。当仅调用一个函数时：

class Test extends React.Component {
   render() { 
      const { fromContainer } = this.props
      return (
         <a href="#" onClick={ fromContainer }>Test Link</a>
      );
   }
}

就是这样。但是它不适用于在不同“位置”中定义的两个功能。

回答：

 class Test extends React.Component {
   constructor() {
     super()
     this.test = this.test.bind(this)
   }
   test() {
     this.props.fromContainer();
     //call other function here
   }
   render() {
     const { fromContainer } = this.props
     return (
         <a href = "#" onClick = { this.test }> Test Link </a>
     );
   }
 }