reactjs - React - 重新渲染组件后失去焦点

Question

悬停在一些图块上后，我想显示上下文菜单。问题是当我点击某个菜单项时，tile 组件被重新渲染，我失去焦点，然后我看不到我的上下文菜单。首先，我必须用鼠标离开我的组件，然后再将鼠标设置在组件上以显示上下文菜单。我的代码（功能组件）：

return (
        <div key={element.id} className={classNames(styles.componentPosition)}>
            <div
                // key={getRandomValue()}
                ref={wrapperRef}
                data-ctx="abc"
                onMouseEnter={() => setIsMenuVisible(true)}
                onMouseLeave={() => setIsMenuVisible(false)}
            >
                {menuItems.length ? (
                    <ContextMenu isVisible={isMenuVisible}>
                        <SelectMenu
                            backgroundOnHover="dark"
                            disabled={false}
                            icon="vertical"
                            isOpen={false}
                            options={menuItems}
                            position={getPosition(wrapperRef.current)}
                        />
                    />

如何解决onMouseEnter重新渲染后无法解决的问题？也许我应该以某种方式检查我的鼠标在重新渲染后是否仍然在我的组件上，因为在重新渲染组件后，onMouseEnter即使我的鼠标仍然在我的组件上也不会调用事件（这意味着我的组件中的上下文菜单应该是可见的）

标签： reactjs