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

我有两个相同的button，除了里面有一个图像，另一个有文本。 我已经添加了一个onClick事件处理程序。

图像button的event.target.value是未定义的，尽pipe有一个值，文本button具有正确的值。

看这个小提琴的例子： 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') ); 

为什么会出现这种情况，在button中使用图像的正确方法是什么？

Answer 1

您需要将target更改为currentTarget ：

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

从DOM事件文档：

Event.currentTarget标识事件的当前目标，因为事件遍历DOM。 它始终引用事件处理程序所附的元素，而不是event.target，它标识事件发生的元素。