event.target.value和event.currentTarget.value之间的区别

Question

我在事件处理程序中捕获输入值,如下所示:

import React from 'react';

export class Newsletter extends React.Component {
    handleClick(event) {
        let newsletterId = event.target.value;
        console.log(newsletterId);
    }

    constructor(props) {
        super(props);
        this.state = {
            newsletter: this.props.newsletter,
        }
    }

    render() {
        return (
            <div className="col-sm-4 col-xs-12">
                 <button onClick={this.handleClick.bind(this)}
                                value={this.state.newsletter.pk}>
                         <span className="fa fa-arrow-right"></span> 
                 </button>
            </div>
        )
    }
}

这表现得很奇怪.目标值有时会变成undefined.有时我得到了正确的newsletterId,有时我得到了undefined.请参见下面的截图:

然后,我改变event.target.value来event.currentTarget.value.现在它运作顺利.

所以,问题出现了,这个场景event.target.value和之间的区别是什么event.currentTarget.value？

Answer 1

这种奇怪行为的原因是什么？为什么我有时会得到预期的价值？

发生这种情况是因为我点击了span元素内部的button元素.点击button有时我实际上点击了span元素.这些点击不会绑定到button元素,而是触发元素上的click事件span.这就是这种奇怪行为的原因.

简而言之,

target:任何人实际点击的元素.它可以变化,因为它可以在事件绑定的元素内.

currentTarget:是您实际绑定事件的元素.这永远不会改变.

参考:

1. 目标值有时未定义
2. 事件目标vs事件currenttarget