我知道在香草JavaScript中,我们可以做到:

onclick="f1();f2()"

在ReactJS中做两个函数调用onClick会等价什么?

我知道调用一个函数是这样的:

onClick={f1}

当前回答

将两个+函数调用打包到另一个函数/方法中。以下是这一观点的几个变体:

1)分离法

var Test = React.createClass({
   onClick: function(event){
      func1();
      func2();
   },
   render: function(){
      return (
         <a href="#" onClick={this.onClick}>Test Link</a>
      );
   }
});

或使用ES6类:

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

2)内联

<a href="#" onClick={function(event){ func1(); func2()}}>Test Link</a>

或ES6同等水平:

<a href="#" onClick={() => { func1(); func2();}}>Test Link</a>

其他回答

如果你必须同时在一个按钮上应用两个函数,那么我们可以在React js中像这样简单地添加。

<button onClick={()=> {fun1(); fun2()}}>Show more</button>

最好的方法:

onClick={() => {f1();f2 ();}}

你可以使用嵌套。

有两个函数,一个是openTab(),另一个是closeMobileMenue(),首先我们调用openTab(),然后调用closeMobileMenue()内部的另一个函数。

function openTab() {
    window.open('https://play.google.com/store/apps/details?id=com.drishya');
    closeMobileMenue()   //After open new tab, Nav Menue will close.  
}

onClick={openTab}

在onClick上为任何元素调用多个函数,您可以创建一个包装器函数,类似这样。

wrapperFunction = () => {
    //do something
    function 1();
    //do something
    function 2();
    //do something
    function 3();
}

这些函数可以定义为父类上的方法,然后从包装器函数调用。

你可能有main元素,它会像这样引起onChange,

<a href='#' onClick={this.wrapperFunction}>Some Link</a>

也许您可以使用箭头函数(ES6+)或简单的旧函数声明。

正常函数声明类型(非ES6+):

<link href="#" onClick={function(event){ func1(event); func2();}}>Trigger here</link>

匿名函数或箭头函数类型(ES6+)

<link href="#" onClick={(event) => { func1(event); func2();}}>Trigger here</link>

第二条路是我所知道的最短的路。希望对你有所帮助!