如何調用兩個箭頭函數 onclick ReactJS

Question

我已經看到很多關於在 React onclick 中調用多個傳統聲明函數的線程，但我很困惑如何用箭頭函數實現它。 我有一個名為 handleClose 的 function，它會關閉 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的function，它打開一個Material UI Modal：

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

當我單擊此菜單項時，我希望運行這兩個功能。 這兩個功能單獨工作正常。 那么我將如何實現這一目標？ （目前我只設置了它以便打開模式）

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

基本上我有一個觸發菜單的按鈕，然后單擊其中一個菜單選項應該在關閉菜單時觸發模式。 此外，這是一個功能組件。

Answer 1

您可以創建一個內聯箭頭 function 調用兩者

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

或者你可以在外面創建一個 function 並傳遞它的引用

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

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