在单击ReactJS上调用多个函数

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

React 函数式组件

             <button
                onClick={() => {
                  cancelOrder();
                  handlerModal();
                }}
             >
                Cancel
             </button>

Answer 3

也许你可以使用箭头功能(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 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

最好的办法：

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