Нажатие на все кнопки в списке ящиков при открытии ящика - PullRequest
Новая
       9

Нажатие на все кнопки в списке ящиков при открытии ящика

0 голосов
/ 14 января 2019

Я пишу одностраничное веб-приложение с использованием React и Material UI, с React-Mini-Router для маршрутизации. У меня есть ящик на стороне, которая активируется значком гамбургера в верхней панели приложения. Каждый из элементов в ящике - это пользовательский интерфейс материала 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>
);

Спасибо!

1 Ответ

0 голосов
/ 14 января 2019

Вы выполняете ChangeView на компонентном монтировании вместо привязки метода к событию click. Просто перепишите эти строки так: 

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