Javascript 对于包装图像而不是文本的按钮，未定义event.target.value

我有两个相同的按钮，除了一个里面有图像，另一个有文本。我已经向这两个应用程序都添加了onClick事件处理程序

图像按钮的event.target.value未定义，尽管具有值且文本按钮具有正确的值

请参阅此小提琴以了解示例：

类MyComponent扩展了React.Component{ 建造师（道具）{ 超级（道具）； this.changeSlide=this.changeSlide.bind（this）； } 更改幻灯片（e）{ e、 预防默认值（）； console.log（'e.target.value'，e.target.value）； } render（）{ 返回( 点击我 ); } } ReactDOM.render( , document.getElementById（'容器'） );

---

为什么会出现这种情况？使用按钮内部图像的正确方法是什么？

您需要将

target

更改为

currentTarget

：

changeSlide(e) {
  e.preventDefault()
  console.log(e.currentTarget.value)
}

从DOM事件文档中：

Event.currentTarget将事件的当前目标标识为 事件将遍历DOM。它总是指它所指向的元素 已附加事件处理程序，而不是event.target 标识发生事件的元素

---

因此，如果您更改小提琴以显示e.target，您会注意到e.target是文本的按钮，但它实际上是图像和图像的图像。值不是“返回”，它是未定义的。如果解决了您的问题，请接受正确的答案：）这有效！我对Material UI MenuItem有类似的问题，它有

onClick

函数，该函数将state设置为

e.target.value

，但在有图像的MenuItem中无法工作。基本上，该图像不可单击，因为

e.target.value

每次都将返回未定义。改为使用

e.currentTarget.value

有效：）

changeSlide(e) {
  e.preventDefault()
  console.log(e.currentTarget.value)
}