如何在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 的模态框：

const [modalOpen, setModalOpen] = React.useState(false);
const handleModalOpen = () => {
  setModalOpen(true);
};

当我点击此菜单项时，我希望两个功能都能运行。这两个功能分别独立运行正常。那么我该如何实现？（当前只设置弹出模态框）

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

基本上，我有一个按钮来触发菜单，然后点击菜单选项中的一个应该触发一个模态框，并关闭菜单。此外，这是一个功能组件。

- Evan Hsueh

---

这回答了你的问题吗？在ReactJS中一次点击调用多个函数 - Emile Bergeron

Answer 1

你可以创建一个内联箭头函数，该函数调用两个函数

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

或者您可以创建一个函数并传递它的引用

handleClick = (e) => {
  handleModalOpen(); 
  handleClose(e);
}

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

- Siddharth

---

我遇到了一个错误，因为 handleClose 没有被传递。 - Evan Hsueh

你只需要传递一个参数，我已经更新了答案。 - Siddharth