Получить идентификатор из обработчика событий, который был передан компоненту кнопки в React? - PullRequest
Новая
       9

Получить идентификатор из обработчика событий, который был передан компоненту кнопки в React?

0 голосов
/ 26 февраля 2019

У меня есть компонент App, который отображает компонент MenuBar.В этом MenuBar я отображаю ListItems (из material-ui) и передаю следующее в качестве реквизита: 

    onClick = (e) => {

    const id = e.target.id;
    console.log(id);
    console.log('called');
}

компонент MenuBar: 

    render() {
    const onClick = this.props.onClick;
    const titles = ["Home", "About", "Docket", "Polls", "News"];
    const listItems = titles.map(title =>
        <ListItem button id={title} onClick={onClick} key={title}>
            <ListItemText primary={title} />
        </ListItem>);
    return (
        <List
            component="ul"
            className="menu-bar">
            {listItems}
        </List>
    );
}

Я хочу использовать этот заголовок,который я пытаюсь извлечь из события, чтобы я мог отобразить компонент Home, компонент About и т. д., в зависимости от того, какой ListItem выбран.Но когда я запускаю это и случайно нажимаю на некоторые из ListItems в моем браузере, заголовок только иногда регистрируется на консоли (на первый взгляд случайно).Как лучше всего получить доступ к списку ListItem или почему консоль записывает заголовок только иногда?

Вот что я получаю в консоли браузера:

Docket

называется

называется

Опросы

называется

Новости

называется

1 Ответ

0 голосов
/ 26 февраля 2019

Причина, по которой вы постоянно не получаете id, заключается в том, что html-элемент, инициирующий событие click, не всегда соответствует вашему мнению.Пожалуйста, посмотрите эту песочницу для примера.Когда вы нажимаете на любой из ListItem, иногда вы получаете (если щелкнуть слева от того места, где находится буква, основываясь на моих испытаниях): 

 <div class="MuiButtonBase-root-1883 MuiListItem-root-1871 MuiListItem-default-1874 MuiListItem-gutters-1879 MuiListItem-button-1880" tabindex="0" role="button" id="a">...</div>

, где присутствует id.Но в других случаях вы получаете: 

<span class="MuiTypography-root-1892 MuiTypography-subheading-1899 MuiListItemText-primary-1889">a</span>

, где отсутствует id.

Решение этой проблемы - передать title непосредственно в функцию onClick: 

 <ListItem button id={title} onClick={() => onClick(title)}>
     ...
 </ListItem>

Соответственно, функцию onClick следует обновить следующим образом: 

onClick = (title) => {
    console.log(title);
    console.log('called');
}
...