调用多个函数 onClick ReactJS

Posted 2023-02-21

【中文标题】调用多个函数 onClick ReactJS

【英文标题】：Call multiple functions onClick ReactJS

【发布时间】：2014-11-22 00:52:02

【问题描述】：

我知道在原生 javascript 中，我们可以做到：

onclick="f1();f2()"

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

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

onClick=f1

【问题讨论】：

非常简单：传递一个调用这两个函数的函数，就像使用ele.onclick = ... 或addEventListener 一样。

如果您的第一个函数是 setState 并且您需要确保在第二个函数运行之前发生/考虑到这一点，您会发现这篇文章很有帮助：medium.com/better-programming/…

【参考方案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>

【讨论】：

或不太理想：onclick=function() f1(); f2();

或者在 ES6 中 onclick=()=> f1(); f2()

或在 cjsx 中：onClick= () => f1(); f2()

如果第一个是异步的..我希望第二个只有在第一个成功完成后才能执行

@Ratnabhkumarrai 这是与 React 无关的另一个问题。这都是关于 JS 中的异步和 Promises are probably the answer you were looking for.

【参考方案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>

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

【参考方案3】：

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

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

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

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

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

【参考方案4】：

假设你有一个按钮，你想执行两个 onClick 事件， 只需单击 1 次即可显示隐藏的文本并隐藏按钮。

let a = 'invisible'
  let b = 'visible'
  const [show, setShow] = useState(a)
  const [buttonshow, setButtonShow] = useState(b)

<button onClick=() => setButtonShow(a); setShow(b)>Read More</button>
<p>This text will show after you press the button Read more and Read
more will be hidden from the DOM
</p>

如您所见，匿名函数只返回了两个函数。

setButtonShow(a); setShow(b)

【参考方案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

【参考方案6】：

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

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

Click to see sample code

Click to see the output

【参考方案7】：

最佳方式：

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