如何在点击 ReactJS 时调用两个箭头函数

Question

我已经看到很多关于在 React onclick 中调用多个传统声明的函数的线程，但我很困惑如何使用箭头函数来实现它。我有一个名为 handleClose 的函数，它关闭一个 Material UI 菜单：const [open, setOpen] = React.useState(false);const anchorRef = React.useRef(null);const handleClose = (event) => {    if (anchorRef.current && anchorRef.current.contains(event.target)) {      return;    }    setOpen(false);  };我有一个名为 handleModalOpen 的函数，它打开一个 Material UI Modal：const [modalOpen, setModalOpen] = React.useState(false);const handleModalOpen = () => {  setModalOpen(true);};当我单击此菜单项时，我希望运行这两个功能。这两个功能单独工作正常。那么我将如何实现这一目标？（目前我只设置了它以便打开模式）<MenuItem onClick={handleModalOpen}>Add Album</MenuItem>基本上我有一个触发菜单的按钮，然后单击其中一个菜单选项应该在关闭菜单时触发模式。此外，这是一个功能组件。

Answer 1

您可以创建一个内联箭头函数，它同时调用

<MenuItem onClick={(e) => {handleModalOpen(); handleClose(e); }}>Add Album</MenuItem>

或者你可以在外面创建一个函数并传递它的引用

handleClick = (e) => {

  handleModalOpen(); 

  handleClose(e);

}

<MenuItem onClick={handleClick}>Add Album</MenuItem>