Как получить доступ к имени кнопки типа MUI ListItem в реакции - PullRequest
Новая
       5

Как получить доступ к имени кнопки типа MUI ListItem в реакции

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

Я создал список Material-UI, в котором каждый ListItem является кнопкой, но когда я пытаюсь получить доступ к названию свойства кнопки, он дает неопределенное значение. 

import React from 'react';
import LoginFront from './login/loginFront';
import {BrowserRouter, Route} from 'react-router-dom';
import {List, ListItem, ListItemText} from '@material-ui/core';

class App extends React.Component {
  render(){
    return(
      <List component='nav'>
        <ListItem button name='bName' onClick={event => console.log(event.target.name)} />
        <ListItemText primary='item1' />
      </List>
    )
  }
}
export default App;

console.log(event.target.name) дает undefined

Ответы [ 2 ]

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

Material-ui не имеет собственного способа сделать это.Простой способ обойти это - вообще не использовать name и передавать свой параметр в предустановленной функции. 

class App extends React.Component {

    clickHandler = name => ev => {
        console.log(name)
    }

    render() {
        return (
            <List component='nav'>
                <ListItem button onClick={this.clickHandler('bName')} />
                <ListItemText primary='item1' />
            </List>
        )
    }
}
export default App;
0 голосов
/ 22 января 2019 
onClick={event => console.log(event.target.getAttribute('name'))}

Используйте метод getAttribute, чтобы получить значение name

html, который вы видите на странице, является просто представлением DOM. Свойства узлов в дереве DOM не совпадают с атрибутами в элементе html.

При создании стандарта они не хотели бы, чтобы интерфейс для элемента DOM был таким же, как атрибут, потому что вы могли бы добавить атрибут, который конфликтует с существующим свойством или методом, однако это только предположение.

EDIT

onClick={event => console.log(event.currentTarget.getAttribute('name'))}

См. здесь для различия между target и currentTarget.

Дело в том, что когда вы определяете onClick для родителя topMost, вам нужно использовать e.currentTarget.id вместо e.target.id, так как e.target даст вам элемент, по которому вы щелкнули, а не родитель, по которому прослушиватель onClick определен

...