为什么在React中传递给onClick的箭头函数内部的函数调用不起作用？

我有一个用户界面组件AppBar（使用钩子），我必须切换抽屉（基于类的组件），并且我使用props.toggleDrawer引用了AppBar.js中的功能toggleDrawer。

当用户单击AppBar中的IconButton组件时，我想调用该函数，因此我尝试使用带有对toggleDrawer（）的调用的箭头功能将onClick属性赋予该组件，但它无法正常工作直接从onClick属性调用该函数即可正常工作。为什么会这样，据我所知，我们应该传递arrow函数，以避免在将JSX解析为原始js期间调用该函数。

OnClick= { props.toggleDrawer('left',true) }
edge="start"
classname={classes.menuButton}
color="inherit"
aria-label="open drawer"
>




上面的代码有效，但下面的无效。 ：（

OnClick= { () => { props.toggleDrawer('left',true)} }
edge="start"
classname={classes.menuButton}
color="inherit"
aria-label="open drawer"
>




*注意：我对钩子一无所知，但是具有IconButton组件的AppBar组件正在使用钩子会导致此问题。

如果您引用的是此示例drawer。那么toggleDrawer是一个咖喱函数（一个被调用的函数会返回另一个函数）。 toggleDrawer已经返回了将在onClick上调用的函数。但是，当您将其放在箭头函数中时，就不会发生函数调用。当使用toggleDrawer和side调用open时，它将返回另一个函数，该函数采用event并返回void。检查下面。

const toggleDrawer = (side: DrawerSide,open: boolean) => (
event: React.KeyboardEvent | React.MouseEvent,) => {
if (
event.type === 'keydown' &&
((event as React.KeyboardEvent).key === 'Tab' ||
(event as React.KeyboardEvent).key === 'Shift')
) {
return;
}
setState({ ...state,[side]: open });
};