javascript - 多个下拉状态和处理 React 中的外部点击

Question

我有一个包含多个 Dropdown 子组件的父组件。状态在父组件中管理，一次只显示一个下拉列表。我目前有一部分在工作，但我在思考逻辑时遇到了一些麻烦，这样当你在下拉菜单外单击时，如果它打开，它就会关闭下拉菜单。我已经尝试使用 useRef 钩子(Hook)来检测外部点击，但仍然无法理解逻辑以正确显示内容。

const MultipleDropdownPage = () => {
    const [dropdown, setDropdown] = useState(null);
    const handleDropdown = id => {
        if (dropdown === id) {
            setDropdown(null);
        }
        if (dropdown !== id) {
            setDropdown(id);
        }
    };
    return (
        <div>
            {dropdown ? dropdown : 'Nothing'}
            <Dropdown handleDropdown={handleDropdown} dropdown={dropdown} id='1' />
            <Dropdown handleDropdown={handleDropdown} dropdown={dropdown} id='2' />
        </div>
    );
};

import React from 'react';

const Dropdown = ({ handleDropdown, id, dropdown }) => {
    return (
        <div>
            <button onClick={() => handleDropdown(id)}>Click me</button>
            {id === dropdown && (
                <div className='dropdown'>
                    <ul>
                        <li>Lorem, ipsum.</li>
                        <li>Dolore, eligendi.</li>
                        <li>Quam, itaque!</li>
                    </ul>
                </div>
            )}
        </div>
    );
};

export default Dropdown;

Answer 1

需要在按钮本身上设置一个类，然后检查单击文档时它是否与该按钮类不匹配

import React, { useRef, useEffect } from 'react';

const Dropdown = ({ handleDropdown, id, dropdown }) => {
    const ref = useRef();
    useEffect(() => {
        const handleClick = e => {
            if (!e.target.classList.contains('dropdown-toggle')) {
                handleDropdown(null);
            }
        };
        document.addEventListener('click', handleClick);
        return () => document.removeEventListener('click', handleClick);
    }, [handleDropdown]);
    return (
        <>
            <button
                onClick={() => handleDropdown(id)}
                ref={ref}
                className='dropdown-toggle'
            >
                Click me
            </button>
            {id === dropdown && (
                <div className='dropdown'>
                    <ul>
                        <li>Lorem, ipsum.</li>
                        <li>Dolore, eligendi.</li>
                        <li>Quam, itaque!</li>
                    </ul>
                </div>
            )}
        </>
    );
};

export default Dropdown;