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

Question

我有两个完全相同的按钮，除了其中一个有图像而另一个有文本。我已经为两者添加了一个 onClick 事件处理程序。

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

有关示例，请参阅此 fiddle :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')
);

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

Answer 1

您需要将target 更改为currentTarget:

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

来自 DOM 事件文档:

Event.currentTarget 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 which identifies the element on which the event occurred.