如何调用两个函数 onClick() react/redux [英] How to call two functions onClick() react/redux

问题描述

我有一个看起来像这样的 component

I have a component that looks like this

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()，另一个是函数 fromContainercode> 是一个 action，通过 reducer 等等.

In my container I connect Test to the Store. I need to call two functions on the onClick. One function as defined in the component itself (onClick() with alert(), the other one is the function fromContainer which is an action, going through the reducer etc.

如何让组件知道 fromContainer 函数.当只有一个函数被调用时:

How do I make the function fromContainer known to the component. When only one function is called its:

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

就是这样.但它不适用于定义在不同位置"的两个函数.

and thats it. But it does not work with two functions, that are defined in different "places".

推荐答案

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

请试试这个

这篇关于如何调用两个函数 onClick() react/redux的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！