Question

我已经创建了一个Material-ui列表，其中每个ListItem是一个按钮，但是当我尝试访问按钮的名称prop时，它会给出未定义的信息。

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元素的接口与属性相同，因为您可能会添加与现有属性或方法冲突的属性，但这只是推测。

编辑

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

有关target和currentTarget之间的区别，请参见here。

问题是，当您在顶级父对象上定义onClick时，您需要使用e.currentTarget.id而不是e.target.id，因为e.target将为您提供您单击的元素，而不是给您单击的元素已定义onClick侦听器

Answer 2

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;

如何在React中访问按钮类型MUI ListItem的名称

2 个答案: