为什么在箭头内调用函数传递给 onClick in react 不起作用?

Question

我有一个材料用户界面组件AppBar(使用钩子(，我必须切换抽屉(基于类的组件(，并且我有一个对AppBar中的函数切换抽屉的引用.js使用props.toggleDrawer。

---

我想在用户单击 AppBar 中的 IconButton 组件时调用该函数，所以我尝试使用箭头功能将 onClick 属性提供给该组件，该函数可以调用 toggleDrawer((，但它不起作用我必须直接从 onClick 属性调用该函数才能工作。为什么会这样，据我所知，我们应该传递箭头函数，以避免在将 JSX 解析为香草 js 期间调用该函数。

<IconButton
onClick = { props.toggleDrawer('left', true) }
edge="start"
className={classes.menuButton}
color="inherit"
aria-label="open drawer"
>
<MenuIcon />
</IconButton>

上面的代码有效，但下面的代码不起作用。 :(

<IconButton
onClick = { () => { props.toggleDrawer('left', true)} }
edge="start"
className={classes.menuButton}
color="inherit"
aria-label="open drawer"
>
<MenuIcon />
</IconButton>

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

Answer 1

如果你指的是这个例子抽屉。然后toggleDrawer是一个柯里函数(调用 1 时返回另一个函数的函数(。toggleDrawer已经返回了一个将在单击时调用的函数。但是，当您将其放入箭头函数中时，就不会发生函数调用。当用side和open调用toggleDrawer时，它会返回另一个函数，该函数需要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 });
};