调用多个函数点击 ReactJS

javascript reactjs

2022-08-30 01:33:52

我知道在vanilla JavaScript中，我们可以做到：

onclick="f1();f2()"

在 ReactJS 中进行两个函数调用的等效项是什么？onClick

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

onClick={f1}

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

答案 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>

第二条是我所知道的最短的路。希望它能帮助你！