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

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

将两个+函数调用打包到另一个函数/方法中。以下是这一观点的几个变体:

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>

您可以简单地将其包装在[]中。这将工作以及在材质UI按钮。

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

单击以查看示例代码

单击以查看输出

功能组件

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

也许您可以使用箭头函数(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事件， 要显示隐藏的文本和隐藏按钮，只需单击一次。

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