javascript - React - 如果事件是从此组件当前呈现的元素触发的，则不要调用方法

Question

我目前有此代码

import { Tooltip } from "Toolkit";
import React, { Component } from "react";

export default class TooltipWrapper extends Component {
    constructor() {
        super();

        this.handleWindowClick = this.handleWindowClick.bind(this);
        this.toggleTooltip = this.toggleTooltip.bind(this);
        this.onTooltipClosed = this.onTooltipClosed.bind(this);
    }

    state = {
        show: false,
    };

    componentDidMount() {
        document.body.addEventListener('click', this.handleWindowClick);
    }

    componentWillUnmount() {
        document.body.removeEventListener('click', this.handleWindowClick);
    }

    onTooltipClosed() {
        this.setState({
            show: false,
        });
    }

    handleWindowClick(event) {
        if (this.state.show) {
            this.setState({
                show: false,
            });
        }
    }

    toggleTooltip(event) {
        this.setState({
            show: !this.state.show,
        });
    }

    render() {
        return (
            <Tooltip
                open={this.state.show}
                tip={this.props.tip}
                onClose={this.onTooltipClosed}
                {...this.props}
            >
                <div onClick={this.toggleTooltip}>{this.props.children}</div>
            </Tooltip>
        );
    }
}

我遇到一个问题，即在 toggleTooltip 之前调用 handleWindowClick 函数。因此，每当我单击工具提示将其关闭时，handleWindowClick 总是首先将状态设置为 false，然后在 toggleTooltip 再次打开它后。

当我单击工具提示外部以关闭它时，handleWindowClick 函数按预期工作，并且当我单击另一个工具提示时，它也会关闭。

在handleWindowClick中，我认为解决方案是，如果我单击了当前在该实例中呈现的工具提示中的任何位置，我不想执行任何操作。关于如何做到这一点有什么想法吗？

谢谢

Answer 1

TLDR:

handleWindowClick(event) {
    if (event.handledByTooltip !== this && this.state.show) {
        this.setState({
            show: false,
        });
    }
}

toggleTooltip(event) {
    event.handledByTooltip = this;
    this.setState({
        show: !this.state.show,
    });
}

由于事件在 DOM 层次结构中冒泡的方式，应在 handleWindowClick 之前调用 toggleTooltip。在每个函数中，您都可以检查事件以确定要采取的操作。

事件的有用属性之一是target，它是对实际单击的元素的引用。不幸的是，这通常是 element 的子元素之一，而不是我们真正关心的元素，因此 if (event.target === myToolTipElement) 通常不起作用。您需要查看 event.target 的父级以及该父级等等。

您可以使用 event.stopPropagation() 来阻止事件冒泡高于工具提示，但这只能作为最后的手段，因为大多数事件通常会一直冒泡到顶部和其他代码可能取决于此。

如果您在工具提示处理程序中调用 event.preventDefault()，则 event.defaultPrevented 在窗口处理程序中将为 true。太好了，您可以从工具提示处理程序与窗口处理程序进行通信!但是 preventDefault 的目的是向浏览器传达您已经处理了该事件并且它不应该执行其将要执行的操作，因此对于这个问题来说这也不太正确。

传达工具提示处理程序已经看到该事件的想法是一个很好的想法，但您还需要知道哪个工具提示处理了该事件。因此，在 toggleTooltip 中，您可以使用一些值来注释事件，该值标识处理该事件的工具提示(我使用了this，它是工具提示所独有的)，并且在handleWindowClick中，您可以比较这些值以查看此工具提示是否已处理该事件。这样，如果您单击一个工具提示，任何其他处理程序中的 handleWindowClick 仍将完成其工作。