我有两个相同的按钮,除了一个在其中有一个图像而另一个有文本。我已经为两者添加了一个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')
);
为什么会出现这种情况?在按钮内使用图像的正确方法是什么?
答案 0 :(得分:3)
您需要将target
更改为currentTarget
:
changeSlide(e) {
e.preventDefault()
console.log(e.currentTarget.value)
}
来自DOM事件文档:
Event.currentTarget标识事件的当前目标,如 事件遍历DOM。它总是指的是哪个元素 已附加事件处理程序,而不是event.target 标识事件发生的元素。