javascript - 检测点击外部组件

Question

所以这是我的代码：

export default ({user, showFriendsInvitations}) => {
    const handleBlur = () => {
        console.log('blur');
        setShowFriendInvitations(false);
    };
    const handleClick = () => {
        console.log(showFriendsInvitations)
        setShowFriendInvitations(!showFriendsInvitations);
    };

    const invites = user.friends.filter(f => f.accepted === false && f.blocked === true);
    return (
        <div className='inline iconBtnContainer'>
            {invites.length > 0 ?
                <div className='notificationContainer'>
                    <p>{invites.length}</p>
                </div>
                : null}

            <button className='iconBtn' onClick={handleClick}>
                 <CustomSvg/>
            </button>

            <div className='newInvitationFriendsDropdown' style={{background: 'yellow'}} onBlur={handleBlur}>
                {invites.length > 0 ?
                    <div className='newInvitationFriendsForm displayCenter'>
                        {invites.map(i => <div key={i}><FriendInvitationContainer invite={i}/></div>)}
                    </div> : <div className='newInvitationFriendsForm displayCenter'>Brak nowych zaproszeń</div>}
            </div>

            {showFriendsInvitations === true ? <FriendsInvitesContainer invites={invites}/> : null}
        </div>
    )
}

这是它的样子：

我想要实现的目标：当用户单击黄色 div 之外的任何位置时，(className="newInvitationFriendsDropdown") 我需要将setShowFriendInvitations其设置为 false。我尝试使用 handleBlur 执行此操作，但它既不注册onBlur也不注册onFocus。

我怎样才能使这项工作？

标签： javascriptreactjs