如何在 Material UI 中捕获作为 IconButton 子元素的 Icon 元素的名称以供 IconButton 的 onClick 参考？

Question

我有这个 IconButton 其中包含 AddCircleIcon:

          <IconButton
            color="primary"
            aria-label="add foo to bar"
            name={ bar.name }
            onClick={ (e) => {
              console.log(e.target.name)
              console.log(e.target)
            }}
          >
            <AddCircleIcon
              name={ bar.name }
            />
          </IconButton>

点击图标和点击按钮是有区别的。将鼠标悬停在图标上会显示一个模糊的轮廓，边缘是按钮：

点击这两个的中心，在加号上，undefined 打印在控制台上。单击图标外的按钮区域会显示来自按钮的 bar.name。

单击按钮上的任意位置（包括图标）时如何引用 e.target.name？

到目前为止，我对发生的事情的理解是 onClick 函数在单击图标时也是运行，因为图标包含在按钮中，但是，事件目标是图标。如果是这样，我不明白为什么要打印 undefined，因为图标也设置了 name。

Answer 1

第二个 console.log 为图标打印 <path d=...，没有名称，没有子项，似乎是带有 nearestViewportElement: <svg ... 和 farthestViewportElement: <svg ... 的 svg 包装器, parentNode, parentElement, ownerSVGElement, - 两者都有 name!

在查找如何访问元素事件的父级时，我发现了 event.currentTarget。使用这个，我能够避免对 e.target.name 进行条件检查，因为 e.currentTarget.name 在单击按钮的任意位置时会正确打印名称，而不必在 IconButton.[=25 上设置名称=]

Event.currentTarget: Event interface identifies the current target for the event, as the event traverses the DOM. It always refers to the element to which the event handler has been attached, as opposed to Event.target 的 currentTarget read-only 属性标识事件发生的元素并且可能是它的后代。

如何在 Material UI 中捕获作为 IconButton 子元素的 Icon 元素的名称以供 IconButton 的 onClick 参考？

How can I capture the name of the Icon element that's the child of IconButton in Material UI for reference in IconButton's onClick?

material-ui

iconbutton