2

我创建了一个 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

4

2 回答 2

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

使用getAttribute方法获取值name

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

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

编辑

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

请参阅此处target了解和之间的区别currentTarget。

问题是当您在 topMost 父级上定义 onClick 时，您需要使用 e.currentTarget.id 而不是 e.target.id 因为 e.target 会给您单击的元素而不是 onClick 侦听器所在的父级定义

于 2019-01-22T09:15:26.720 回答
0

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;
于 2019-01-22T09:17:28.897 回答