在 Ant Design 组件库中,Dropdown 组件提供了 onSelect
和 onClick
两个回调函数,可以用于处理点击事件。
onSelect
回调函数在 Dropdown 子菜单项被选择时触发,而 onClick
回调函数则在 Dropdown 菜单被点击时触发。
以下是一个使用 onClick
回调函数处理点击事件的示例:
import { Dropdown, Button } from 'antd';
const { Menu } = Dropdown;
function handleClick(e) {
console.log('Dropdown clicked:', e);
}
const App = () => (
<Dropdown onClick={handleClick}>
<a>Click me</a>
<Menu>
<Menu.Item>Option 1</Menu.Item>
<Menu.Item>Option 2</Menu.Item>
<Menu.Item>Option 3</Menu.Item>
</Menu>
</Dropdown>
);
export default App;
在这个示例中,我们定义了一个名为 handleClick
的回调函数,用于处理 Dropdown 菜单的点击事件。在 Dropdown
组件上设置 onClick={handleClick}
将该回调函数绑定到菜单的点击事件上。当用户点击 Dropdown 菜单时,handleClick
函数将被调用,同时传入一个包含事件信息的对象作为参数。在这个例子中,我们简单地将点击事件的信息打印到控制台上。