如何在react.js中添加多个onclick事件?

Question

我遇到过一个场景，onclick按钮已经被使用了

但同时我需要添加一个事件来添加history。push()，

我正在使用UI材料制作侧边栏组件

所以需要自定义一些东西，我添加了代码

const menuItems = [
{
text: 'Home',
icon: HomeIcon,
onClick: () => history.push("/"),
},
{
text: 'Log In',
icon: MailIcon,
onClick: () => history.push("/login"),
},
{
text: 'Sign Up',
icon: HomeIcon,
onClick: () => history.push("/signup"),
},
];
...
<List>
{menuItems.map(({ text, icon: Icon, onClick}, index) => (
<ListItem
button
onClick={
item === menus[2]
? handleSubMenu1Click
: handleSubMenu2Click
}
>
<ListItemIcon>
<Icon />
</ListItemIcon>
<ListItemText primary={text} />
</ListItem>
))}
</List>

我试过这样做

const menuItems = [
{
text: 'Home',
icon: HomeIcon,
to: "/",
},
{
text: 'Log In',
icon: MailIcon,
to:"/login",
},

<ListItem element={Link} to={item.to} button key={text}>

如果我们有子菜单，也需要导航，什么是最好的方法

Answer 1

使用事件冒泡将单个onClick处理程序附加到您的<List>组件，而不是像这里描述的那样将多个处理程序附加到每个<ListItem>https://blog.logrocket.com/event-bubbling-capturing-react/。

在处理程序函数中，您将获得一个SyntheticEvent对象，其target属性将包含对所单击项的引用，您可以使用该引用来确定下一步要采取的操作。

查看此沙箱:https://codesandbox.io/s/snowy -海- 998 zvl?file=/src/app.js

然而，从你的代码我推断你只是试图创建一个导航菜单与链接，并为此，你可能只是想使用react-router-dom的<Link>组件，而不是显示在这个沙箱:https://codesandbox.io/s/exciting-diffie-putb4f?file=/src/Nav.js