单击子元素时，React 单击事件不起作用

Question

这是我的代码

export default myComponent = () => {
    const handleClick = (e) => {
        const parent = e.target.parentElement;

        if (parent.classList.contains('selected_category')) {
            parent.classList.remove('selected_category');
        } else {
            parent.classList.add('selected_category');
        }
    };

    return (
        <>
            <ul>
                <li className="">
                    <a onClick={handleClick}>
                        content<span class="text-gray-25 font-size-12 font-weight-normal">
                            121
                        </span>
                    </a>
                </li>
                <li className="">
                    <a onClick={handleClick}>
                        content<span class="text-gray-25 font-size-12 font-weight-normal">
                            121
                        </span>
                    </a>
                </li>
            </ul>
        </>
    );
}

我写了这段代码，当我点击标签元素时，它的父元素会获得类“selected_category”（如果它还没有的话）。 但这里的问题是当我单击子类时，“selected_category”类被添加到父标签中。 有什么解决方案可以防止它吗？

这是我在沙盒中的代码

Answer 1

要在我的意见进一步阐述：这个问题来自于使用e.target ，这可以参照该事件，听者一定会或其后代（S）的元素。 在这种情况下，您的<a>标签将<span>作为子标签。 当点击事件冒泡到源自内部<span> <a>标签时， e.target将引用后者：这不是您想要的。

为了确保您始终获得对事件侦听器绑定到的实际元素的引用，您需要使用e.currentTarget ：

当事件遍历 DOM 时， Event接口的currentTarget只读属性标识Event的当前目标。 它始终指的是事件处理程序已附加到的元素，而不是Event.target ，后者标识发生事件的元素以及它可能是其后代的元素。

因此，您更新的函数应该简单地使用currentTarget代替，即：

const handleClick = (e) => {
    // NOTE: Use e.currentTarget here instead of e.target
    const parent = e.currentTarget.parentElement;

    if (parent.classList.contains('selected_category')) {
        parent.classList.remove('selected_category');
    } else {
        parent.classList.add('selected_category');
    }
};