使用 Material-UI 和 ReactJS 处理图标 onClick 事件答案

【问题标题】：Handling icon onClick events with Material-UI and ReactJS使用 Material-UI 和 ReactJS 处理图标 onClick 事件
【发布时间】：2019-10-01 23:32:08
【问题描述】：

我试图在单击时获取图标按钮的“名称”

我已经阅读了有关使用材质 UI 的信息，但我不断从处理程序中得到“未定义”

import React from 'react'
import {IconButton} from '@material-ui/core'
import InfoIcon from '@material-ui/icons/InfoOutlined'

const App = () => {

    const handleIconClicks = (e) => {
        console.log(e.target.name)
    }
    return (
        <div>
            <IconButton name="details" onClick={(e) => handleIconClicks(e)}>
                <InfoIcon />
            </IconButton>
        </div>
    )
}
export default App

handleIconClicks() 应该返回 event.target 的名称，而不是我得到 undefined

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

event.target可以指<IconButton />的图标。

您应该能够安全地使用event.currentTarget 来获取按钮（并使用event.currentTarget.name 来获取其名称）。

【讨论】：

【解决方案2】：

您无法使用 IconButton 的事件获取名称，因为它的事件是 null。所以你可以使用它。

    const handleIconClicks = name => () => {
        console.log(name);
    }
... ... ...
    <IconButton name="details" onClick={handleIconClicks('detail')}>
       <InfoIcon />
    </IconButton>
... ... ...

【讨论】：