reactjs - 如何在 react 中访问按钮类型 mui ListItem 的名称

Question

我创建了一个material-ui列表，其中每个ListItem都是一个按钮，但是当我尝试访问按钮的name属性时，它给出了未定义。

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

Answer 1

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

使用getAttribute方法获取name的值

您在页面上看到的 html 只是 DOM 的渲染表示。 DOM 树上的节点属性与 html 元素上的属性不匹配。

在创建标准时，他们不希望 DOM 元素的接口(interface)与属性相同，因为您可能会添加与现有属性或方法冲突的属性，但这只是猜测。

编辑

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

参见here了解 target 和 currentTarget 之间的差异。

The thing is when you define onClick on the topMost parent, you need to use e.currentTarget.id instead of e.target.id since e.target will give you the element on which you clicked rather then the parent on which onClick listener is defined