调用多个函数 onClick ReactJS

IT技术 javascript reactjs
2021-01-23 05:02:38

我知道在 vanilla JavaScript 中,我们可以这样做:

onclick="f1();f2()"

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

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

onClick={f1}
6个回答

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

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>
或者在 ES6 中 onclick={()=>{ f1(); f2() }}
2021-03-15 05:02:38
或者不太理想: onclick={function() { f1(); f2(); }}
2021-03-19 05:02:38
如果第一个是异步的怎么办..我希望只有在第一个成功完成后才执行第二个
2021-03-25 05:02:38
或者在 cjsx 中: onClick={ () => f1(); f2() }
2021-03-26 05:02:38
@Ratnabhkumarrai 这是另一个与 React 无关的问题。这完全是关于 JS 中的异步,并且Promises可能是您正在寻找的答案。
2021-04-11 05:02:38

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

普通函数声明类型(非 ES6+):

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

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

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

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

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

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

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

你可能有主要的元素会像这样导致 onChange,

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

您可以使用嵌套。

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

你可以简单地把它包裹在里面[]这也适用于材质 UI 按钮。

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

点击查看示例代码

点击查看输出