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元素，而是触发span元素上的click事件。这就是这种奇怪行为的原因。

简而言之，

target：某人实际点击的元素。它可以变化，因为它可以在事件绑定的元素内。

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

<强>参考：

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

1 个答案: