javascript - How to call two arrow functions onclick ReactJS - Stack Overflow

admin管理员组

文章数量:1389925

I've seen a lot of threads about calling multiple traditionally declared functions in React onclick, but I'm confused how I could implement that with arrow functions. I have a function called handleClose, which closes a Material UI menu:

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

And I have a function called handleModalOpen, which open a Material UI Modal:

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

When I click this menu item, I would like both functions to run. Both functions individually work fine on their own. So how would I achieve this? (Currently I only have it set so the modal opens)

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

Basically I have a button that triggers a menu, and then clicking one of those menu options should trigger a modal whilst closing the menu. Also, this is a functional ponent.

I've seen a lot of threads about calling multiple traditionally declared functions in React onclick, but I'm confused how I could implement that with arrow functions. I have a function called handleClose, which closes a Material UI menu:

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

And I have a function called handleModalOpen, which open a Material UI Modal:

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

When I click this menu item, I would like both functions to run. Both functions individually work fine on their own. So how would I achieve this? (Currently I only have it set so the modal opens)

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

Basically I have a button that triggers a menu, and then clicking one of those menu options should trigger a modal whilst closing the menu. Also, this is a functional ponent.

• javascript
• reactjs

Share Improve this question Follow edited Jun 28, 2020 at 19:55 Evan Hsueh asked Jun 28, 2020 at 19:42 Evan HsuehEvan Hsueh 14911 gold badge33 silver badges1010 bronze badges 1

• 2 Does this answer your question? Call multiple functions onClick ReactJS – Emile Bergeron Commented Jun 28, 2020 at 19:46

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

Either you can create an inline arrow function which calls the both

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

Or you can create a function outside and pass its reference

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

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

本文标签： javascriptHow to call two arrow functions onclick ReactJSStack Overflow