打开抽屉时，所有按钮在抽屉列表中出现鬼点击

Question

我正在使用 React 和 Material UI 编写一个单页 Web 应用程序，React-Mini-Router 用于路由。我在侧面有一个抽屉，它由顶部应用程序栏中的汉堡包图标激活。抽屉中的每个项目都是一个 Material UI ListItem，单击时应该导航到它们各自的视图。但是，当单击汉堡图标时，似乎所有onClick 事件都被触发，并且视图变为列表中最后一项的视图。如果我为要访问的视图输入正确的 url，它会起作用，但单击抽屉中的按钮不会重定向到列表中的最后一页。

我尝试更改列表中的最后一项，而问题出现在最后一项之后（这就是为什么我认为它们都被连续触发的原因）。我已确保汉堡按钮的事件仅触发抽屉状态更改。我还注意到，当页面发生变化时，它会变成 http://localhost:3000/#!/help 而不是我期望的 http://localhost:3000/help 或 http://localhost:3000/help#!/

这是我的抽屉列表的设置：

const drawerList = (
    <div width="250">
        <ListItem button key='Home' onClick={this.ChangeView('/')}>
            <ListItemIcon><HomeIcon /></ListItemIcon>
            <ListItemText primary='Home' />
        </ListItem>
        <ListItem button key='Vote' onClick={this.ChangeView('/vote')}>
            <ListItemIcon><VoteIcon /></ListItemIcon>
            <ListItemText primary='Vote' />
        </ListItem>
        <ListItem button key='Organizer Login' onClick={this.ChangeView('/organizer')}>
            <ListItemIcon><OrganizerIcon /></ListItemIcon>
            <ListItemText primary='Organizer Login' />
        </ListItem>
        <Divider />
        <ListItem button key='Help' onClick={this.ChangeView('/help')}>
            <ListItemIcon><HelpOutlineIcon /></ListItemIcon>
            <ListItemText primary='Help' />
        </ListItem>
    </div>
);

谢谢！

Answer 1

您正在组件挂载上执行ChangeView，而不是将方法绑定到click 事件。只需像这样重写这些行：

<ListItem button key="Home" onClick={() => this.ChangeView('/')>...</ListItem>