调用多个函数单击“反应JS”

two+ 函数调用包装在另一个函数/方法中。以下是该想法的几个变体：

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+(或简单的旧函数声明。

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

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

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

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

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

React 功能组件

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

在onClick上为任何元素调用多个函数，您可以创建一个包装函数，如下所示。

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

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

你可能有主要元素，它会导致这样的变化，

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

最佳方法：

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

如果你必须同时在一个按钮点击上应用两个函数，那么我们可以简单地在 React js 中添加这样的功能。

<button onClick={()=> {fun1(); fun2()}}>Show more</button>

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

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

点击查看示例代码

点击查看输出

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

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)}

//Don't do this way
function App() {
  return (
    <div>
      <button
        onClick={() => {
          console.log('hello');
          console.log('world');
        }}>
        I'm a button
      </button>
    </div>
  );
}
//Do this way
function App() {
  function fun1() {
    console.log('hello');
  }
  function fun2() {
    console.log('world');
  }
  return (
    <div>
      <button onClick={() => {fun1();fun2();}}>Click</button>
    </div>
  );
}

您可以使用嵌套。

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

一个简单的单行：

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