我想使用antdesign的popover实现以下效果
- 当
hover
的时候可以弹出A - 当
click
或focus
的时候可以弹出B,此时hover
弹出的A消失
行为类似于youtube
上hover
、click
、focus
评论区排序图标
- 当
click
或focus
时 - 当
hover
时
我想使用antdesign的popover实现以下效果
hover
的时候可以弹出Aclick
或focus
的时候可以弹出B,此时hover
弹出的A消失行为类似于youtube
上hover
、click
、focus
评论区排序图标
click
或focus
时hover
时在 Ant Design 的 Popover
组件中,你可以通过控制 visible
状态和监听不同的事件来实现 hover
、click
和 focus
时弹出不同内容的需求。下面是一个简单的示例代码,展示了如何实现这种效果:
import React, { useState, useEffect, useRef } from 'react';
import { Popover, Button } from 'antd';
const MyComponent = () => {
const [isHoverVisible, setIsHoverVisible] = useState(false);
const [isClickVisible, setIsClickVisible] = useState(false);
const triggerRef = useRef(null);
const handleVisibleChange = (visible, trigger) => {
if (trigger === 'hover') {
setIsHoverVisible(visible);
} else if (trigger === 'focus' || trigger === 'click') {
setIsClickVisible(visible);
}
};
useEffect(() => {
const handleOutsideClick = (event) => {
if (triggerRef.current && !triggerRef.current.contains(event.target)) {
setIsClickVisible(false);
}
};
document.addEventListener('mousedown', handleOutsideClick);
return () => {
document.removeEventListener('mousedown', handleOutsideClick);
};
}, []);
return (
<div>
<Popover
visible={isHoverVisible}
content="这是hover时弹出的内容A"
trigger="hover"
onVisibleChange={(visible) => handleVisibleChange(visible, 'hover')}
>
<Button ref={triggerRef}>Hover Me</Button>
</Popover>
<Popover
visible={isClickVisible}
content="这是click或focus时弹出的内容B"
trigger={['click', 'focus']}
onVisibleChange={(visible) => handleVisibleChange(visible, 'click')}
>
<Button ref={triggerRef}>Click or Focus Me</Button>
</Popover>
</div>
);
};
export default MyComponent;
在上面的代码中,我们使用了两个 Popover
组件,一个用于 hover
事件,另一个用于 click
和 focus
事件。我们为每个 Popover
组件维护了一个独立的 visible
状态,分别是 isHoverVisible
和 isClickVisible
。通过 useState
和 useEffect
来管理这些状态。
当 hover
事件触发时,我们更新 isHoverVisible
状态,显示或隐藏第一个 Popover
。当 click
或 focus
事件触发时,我们更新 isClickVisible
状态,显示或隐藏第二个 Popover
。
在 useEffect
钩子中,我们添加了一个全局的 mousedown
事件监听器,当点击事件发生在 Button
组件外部时,关闭通过 click
或 focus
触发的 Popover
。这是为了确保当用户点击其他地方时,通过 click
或 focus
触发的 Popover
能够关闭。
请注意,这个示例假设你使用的是函数组件和 React Hooks。如果你使用的是类组件,那么你需要使用类组件的状态管理和生命周期方法来替代 useState
和 useEffect
。
另外,代码中的 Button
组件的 ref
属性被同时赋给了两个 Popover
组件。这是为了简化示例,实际上你可能需要为每个 Popover
组件使用单独的 ref
,并相应地调整事件监听逻辑。
2 回答1.2k 阅读✓ 已解决
2 回答1.7k 阅读
1 回答874 阅读
1 回答855 阅读
1 回答668 阅读
787 阅读
1 回答322 阅读