Question

我正在使用React和Material UI编写一个单页的Web应用程序，其中React-Mini-Router用于路由。我的侧面有一个抽屉，该抽屉由顶部应用程序栏中的汉堡包图标激活。抽屉中的每个项目都是一个材料UI ListItem，当单击该材料UI时应导航到它们各自的视图。但是，单击汉堡包图标时，似乎所有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>

打开抽屉时，所有按钮都会在抽屉列表中点击鬼影

1 个答案: