Question

我知道在vanilla js，我们可以做到

onclick="f1();f2()"

在ReactJS中进行两次函数调用onClick的等价物是什么？

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

onClick={f1}

Answer 1

用另一个函数/方法包装你的两个+函数调用。以下是该想法的几种变体：

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={(event) => { func1(); func2();}}>Test Link</a>

Answer 2

也许您可以使用箭头功能（ES6 +）或简单的旧功能声明。

正常函数声明类型（不是ES6 + ）：

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

匿名功能或箭头功能类型（ ES6 + ）

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

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

Answer 3

如果我想同时使用两个不同的功能，那么这个onclick={()=>{ f1(); f2() }}对我有很大帮助。但是现在我只想用一个按钮创建一个录音机。因此，如果我首先单击，我想运行StartFunction f1()，如果我再次单击，则我想运行 StopFunction f2()。

你们如何认识到这一点？

Answer 4

在onClick上为任何元素调用多个函数，您可以创建一个包装函数，如下所示。

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

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

您可能具有将导致此类onChange的主要元素，

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

Answer 5

您可以使用嵌套。

有两个函数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}

Answer 6

您可以简单地将其包裹在 [] 中。这也适用于材质 UI 按钮。

<Button onClick={(event) => [function1(), function2()]}>Click Me</Button>

Click to see sample code

Click to see the output

在单击ReactJS上调用多个函数

6 个答案: