antd select multiple模式 Dropdown onClick 失效

  • 背景:当 Ant Design 的下拉菜单(Dropdown)在默认情况下从下方弹出,在某些情况下可能会因为页面空间不足而自动切换到上方弹出。这种位置变动可能导致点击事件无法触发。

  • 复现描述:当输入搜索时,option会筛出来选项。这时候click 全选按钮,会失效。

  • 原因:onclick 是onMouseDown和 onMouseUp,也就是点击 松开为一次click。当up的时候会触发click,但是up的时候位置变化了。所以导致点击没有触发。

  • 点击前
    在这里插入图片描述

  • 点击后效果,可以看到并没有打印结果
    在这里插入图片描述

  • 解决方案:将 onClick 替换为 onMouseDown,因为 onMouseDown 事件在鼠标按下时触发,而 onClick 事件在鼠标释放时触发。

  • demo:https://codesandbox.io/s/kuo-zhan-cai-dan-antd-5-7-0-forked-lxfdv2?file=/demo.tsx

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在React中,使用Ant Design的Table组件,在表格中添加操作列并结合Dropdown和Menu组件可以实现更丰富的交互效果。 首先,我们需要导入相关的组件和样式: ```jsx import { Table, Dropdown, Menu, Button } from 'antd'; import { DownOutlined } from '@ant-design/icons'; import 'antd/dist/antd.css'; ``` 然后,在表格的columns中定义操作列,并使用Dropdown和Menu组件来定制操作菜单: ```jsx const columns = [ ...其他列定义, { title: '操作', key: 'action', render: (text, record) => ( <Dropdown overlay={menu}> <Button> 操作 <DownOutlined /> </Button> </Dropdown> ), }, ]; const menu = ( <Menu> <Menu.Item key="1"> <a target="_blank" rel="noopener noreferrer" href="#"> 编辑 </a> </Menu.Item> <Menu.Item key="2"> <a target="_blank" rel="noopener noreferrer" href="#"> 删除 </a> </Menu.Item> </Menu> ); ``` 以上代码中,columns定义了表格的列,其中操作列使用render属性来渲染。在render方法中,我们使用Dropdown组件来包裹Button,并将Menu作为overlay传入。 menu定义了操作菜单的内容,其中使用Menu.Item来定义菜单项,通过设置key属性来区分不同的菜单项。菜单项可以是一段文本或者其他React元素,这里我们使用a标签来模拟菜单项的操作。 最后,在Table组件中将columns配置为表格的列: ```jsx <Table columns={columns} dataSource={data} /> ``` 以上是在React中使用Ant Design的Table组件添加操作列并结合Dropdown和Menu的写法,通过这种方式,我们可以方便地在表格中定制各种操作的菜单。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值