ReactJS onclick 如何调用两个箭头函数

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>