javascript - React 处理多个元素的外部点击

Question

我试图模仿一个标题，如果您单击下拉菜单，它将显示弹出菜单，并且在弹出菜单元素外部单击时，它会在标题中的多个元素中消失。

这是我修改过但无法正常工作的 Vanilla 笔: https://codepen.io/anon/pen/JOGGzL

handleClick() {
    if (!this.state.popupVisible) {
      document.addEventListener('click', this.handleOutsideClick, false);
    } else {
      document.removeEventListener('click', this.handleOutsideClick, false);
    }

    this.setState(prevState => ({
       popupVisible: !prevState.popupVisible,
    }));
}

handleOutsideClick(e) {
    if (this.node.contains(e.target)) {
      return;
    }

    this.handleClick();
}

我已经尝试创建唯一的引用并通过 handleClick 和 handleOutsideClick 传递参数以区分两个不同的弹出按钮，但我遇到了一个问题，它似乎产生了很多 EventListeners 而没有正确删除它们.

如果用户在任一弹出元素之外单击，一次切换一个按钮并停用所有按钮的最优雅方法是什么？我是否必须创建单独的组件来处理这个问题？

谢谢

Answer 1

您可以使用 React 的生命周期方法，而不是在实际处理程序中添加和删除事件:

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

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

您的 handleOnClick 方法可以执行标准的切换状态操作，但是如果它不是下拉列表或包含目标，则 handleOutsideClick 可以始终将其设置为 false:

handleOutsideClick(event) {
    if (this.node === event.target || !this.node.contains(event.target)) {
        this.setState(prevState => ({
             popupVisible: false
        }));
    }
}

处理多个弹出窗口的最优雅的方法是拥有一个类来执行您在上面看到的所有逻辑，称为 Popover，它呈现一个子组件。您可以像这样在父组件中重用它:

const MorePops = () => (
    <div>
        <Popover label={'label text'}>
            <div>{'Child'}</div>
        </Popover>
        <Popover label={'label text'}>
            <div>{'Child'}</div>
        </Popover>
        <Popover label={'label text'}>
            <div>{'Child'}</div>
        </Popover>
        <Popover label={'label text'}>
            <div>{'Child'}</div>
        </Popover>
    </div>
);