时间戳

首页 > 解决方案 > React - 我如何关闭所有其他工具提示？

javascript - React - 我如何关闭所有其他工具提示？

问题描述

我目前有一个从工作中提供给我的工具提示组件，一切都很好，所以我制作了一个工具提示包装器来满足额外的要求。

问题是当我点击另一个时，我想关闭工具提示的所有其他实例。我已经为窗口添加了一个单击事件侦听器，因此每当我单击 else ware 时，工具提示的任何实例都会关闭。我遇到的问题是，handleWindowClick当我单击另一个工具提示时，此事件不会触发，因此我能够一次打开多个工具提示。当要求是，每当打开一个工具提示时，另一个会关闭，因此一次只打开一个工具提示。

import { Tooltip } from "Tooltip";
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);
        this.state = {
            show: false
        };
    }

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

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

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

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

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

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

标签： javascriptreactjs

解决方案

也许将点击监听器添加到正文可能会对您有所帮助，请尝试以下操作：

document.body.addEventListener('click', this.onClickBody);

推荐阅读