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

【问题标题】：event.target.value is undefined for buttons that wrap an image instead of textevent.target.value 对于包装图像而不是文本的按钮未定义
【发布时间】：2018-02-03 13:51:02
【问题描述】：

我有两个相同的按钮，除了一个里面有图片，另一个有文字。我已经为两者添加了一个 onClick 事件处理程序。

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

请看这个小提琴的例子：https://jsfiddle.net/69z2wepo/84885/

class MyComponent extends React.Component {
  constructor(props) {
    super(props);

    this.changeSlide = this.changeSlide.bind(this);
  }

  changeSlide(e) {
    e.preventDefault();
    console.log('e.target.value', e.target.value);
  }

  render() {
    return (
      <div>
      <button
        onClick={this.changeSlide}
        value="back">
        <img src="//www.gravatar.com/avatar/7150a453468d14f599772cd8330fcf25/?default=&s=80" alt="Previous slide" />
      </button>

        <button
          onClick={this.changeSlide}
          value="back">
          CLICK ME
        </button>
      </div>
    );
  }
}

ReactDOM.render(
  <MyComponent />,
  document.getElementById('container')
);

为什么会这样？在按钮内使用图像的正确方法是什么？

【问题讨论】：

因此，如果您将小提琴更改为显示 e.target，您会注意到 e.target 是文本的按钮，但它实际上是图像的图像，而图像的 .value不是“返回”，它是未定义的。

标签： javascript node.js reactjs

【解决方案1】：

对于某些 DOM 元素，您应该使用textContent 而不是value，后者更适用于输入元素

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

结帐this Stack Overflow post 了解更多信息。

【讨论】：

【解决方案2】：

你需要把target改成currentTarget：

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

来自 DOM 事件文档：

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

【讨论】：

如果它解决了您的问题，请接受正确的答案:)
这成功了！我有类似的问题 Material UI MenuItem 有 onClick 函数 setState 到 e.target.value 但它不会在 MenuItem 中工作，里面有图像。基本上，该图像不可点击，因为 e.target.value 每次都会返回 undefined 。使用 e.currentTarget.value 代替工作！ :)