Javascript 如何在单击ReactJS时调用两个箭头函数
我见过很多关于在React onclick中调用多个传统声明函数的线程,但我不知道如何用arrow函数实现它。我有一个名为handleClose的函数,它关闭材质UI菜单:Javascript 如何在单击ReactJS时调用两个箭头函数,javascript,reactjs,Javascript,Reactjs,我见过很多关于在React onclick中调用多个传统声明函数的线程,但我不知道如何用arrow函数实现它。我有一个名为handleClose的函数,它关闭材质UI菜单: const [open, setOpen] = React.useState(false); const anchorRef = React.useRef(null); const handleClose = (event) => { if (anchorRef.current && ancho
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的函数,它打开一个材质UI模式:
const [modalOpen, setModalOpen] = React.useState(false);
const handleModalOpen = () => {
setModalOpen(true);
};
单击此菜单项时,我希望两个函数都运行。这两个功能各自都可以正常工作。那么,我将如何实现这一目标?(目前我仅将其设置为打开模式)
添加相册
基本上,我有一个触发菜单的按钮,然后单击其中一个菜单选项应该在关闭菜单时触发模式。此外,这是一个功能组件。您可以创建一个内联箭头函数,该函数调用
<MenuItem onClick={(e) => {handleModalOpen(); handleClose(e); }}>Add Album</MenuItem>
添加相册
也可以在外部创建函数并传递其引用
handleClick = (e) => {
handleModalOpen();
handleClose(e);
}
<MenuItem onClick={handleClick}>Add Album</MenuItem>
handleClick=(e)=>{
handleModalOpen();
handleClose(e);
}
添加相册
这是否回答了您的问题?我收到一个错误,因为事件没有传递给handleClose。您只需要传递一个参数,我已经更新了答案。
handleClick = (e) => {
handleModalOpen();
handleClose(e);
}
<MenuItem onClick={handleClick}>Add Album</MenuItem>