调用多个函数 onClick ReactJS [英] Call multiple functions onClick ReactJS

问题描述

我知道在原生 JavaScript 中，我们可以做到:

I know in vanilla JavaScript, we can do:

onclick="f1();f2()"

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

What would be the equivalent for making two function calls onClick in ReactJS?

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

I know calling one function is like this:

onClick={f1}

推荐答案

将两个以上的函数调用包装在另一个函数/方法中.以下是该想法的几种变体:

Wrap your two+ function calls in another function/method. Here are a couple variants of that idea:

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 的:

or ES6 equivalent:

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

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