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

时间:2017-08-25 13:33:26

标签: javascript node.js reactjs

我有两个相同的按钮,除了一个在其中有一个图像而另一个有文本。我已经为两者添加了一个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')
);

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

1 个答案:

答案 0 :(得分:3)

您需要将target更改为currentTarget

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

来自DOM事件文档:

  

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