如何为页面非React部分添加事件处理器 实现点击外部收起React下拉组件

代码报错修复 #

你遇到的this.myFunction为undefined的问题，根源是addListener方法没有绑定组件实例的this指向，你只在constructor中绑定了myFunction和removeListener的this，触发addListener时this指向了绑定点击事件的div元素，自然找不到实例上的myFunction方法。
修复只需要在constructor中补充绑定即可：

constructor(props) {
    super(props);
    this.myFunction = this.myFunction.bind(this);
    this.removeListener = this.removeListener.bind(this);
    // 补充绑定addListener
    this.addListener = this.addListener.bind(this);
}

另外你代码中调用document.getElementById('CLICKER')获取的元素在当前render内容中不存在，实际运行时会抛出空指针错误，需要补充对应id的元素后再使用。

点击外部区域收起下拉框实现方案 #

不需要直接操作DOM修改下拉框显隐，通过全局事件监听触发React内部状态更新即可实现需求，不会和React的DOM管理逻辑冲突，具体实现逻辑如下：

1. 给下拉框的根容器绑定React Ref，用于判定点击区域是否属于下拉框内部
2. 组件挂载阶段给document绑定全局click事件监听
3. 全局点击回调中判断：如果点击目标不在下拉框Ref的包含范围内，且当前下拉框为展开状态，就更新状态收起下拉框
4. 组件卸载阶段必须移除全局事件监听，避免内存泄漏

完整实现代码：

import './App.css';
import React, { Component, createRef } from 'react';

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            dropdownOpen: false
        };
        // 下拉框容器Ref
        this.dropdownWrapper = createRef();
        // 绑定this
        this.toggleDropdown = this.toggleDropdown.bind(this);
        this.handleOuterClick = this.handleOuterClick.bind(this);
    }

    componentDidMount() {
        // 挂载时添加全局点击监听
        document.addEventListener('click', this.handleOuterClick);
    }

    componentWillUnmount() {
        // 卸载时移除全局监听
        document.removeEventListener('click', this.handleOuterClick);
    }

    toggleDropdown(e) {
        // 阻止事件冒泡到document，避免点击触发按钮时直接触发全局监听收起下拉
        e.stopPropagation();
        this.setState(prev => ({
            dropdownOpen: !prev.dropdownOpen
        }));
    }

    handleOuterClick(e) {
        // 点击区域不在下拉框内部时收起下拉
        if (this.dropdownWrapper.current && !this.dropdownWrapper.current.contains(e.target)) {
            this.setState({
                dropdownOpen: false
            });
        }
    }

    render() {
        return (
            <div className="App">
                <div ref={this.dropdownWrapper}>
                    <button onClick={this.toggleDropdown}>
                        {this.state.dropdownOpen ? '收起' : '展开'}下拉框
                    </button>
                    {this.state.dropdownOpen && (
                        <ul className="dropdown-content">
                            <li>选项1</li>
                            <li>选项2</li>
                            <li>选项3</li>
                        </ul>
                    )}
                </div>
                <div>页面其他内容，点击此处下拉框会自动收起</div>
            </div>
        );
    }
}

export default App;

内容的提问来源于stack exchange，提问作者Christopher Vickers