antd table的单击事件和双击事件冲突
问题:当table上同时有onClick和onDoubleClick时,双击会一直触发单击事件。
解决方法:使用延迟定时器-setTimeout
单击事件延迟执行,如果检测到连续点击,则是双击事件,不再执行单击事件。
代码实现:
import React, { useState } from "react";
import { Table } from "antd";
import { ColumnsType } from "antd/lib/table";interface DataType {key: string;name: string;age: number;address: string;
}const MyTable: React.FC = () => {const [clickTimeout, setClickTimeout] = useState<NodeJS.Timeout | null>(null);const handleSingleClick = (e: React.MouseEvent<HTMLElement, MouseEvent>, record: T) => {if (clickTimeout) {clearTimeout(clickTimeout);setClickTimeout(null);console.log("Double click");} else {setClickTimeout(setTimeout(() => {console.log("Single Click");// 在这里执行单击事件的处理逻辑setClickTimeout(null);}, 300));}};const handleDoubleClick = (e: React.MouseEvent<HTMLElement, MouseEvent>, record: T) => {clearTimeout(clickTimeout as NodeJS.Timeout);setClickTimeout(null);console.log("Double click");// 在这里执行双击事件的处理逻辑};const data: DataType[] = [{key: "1",name: "xiaohong",age: 18,address: "xxxxxx",},{key: "2",name: "xiaoming",age: 10,address: "xxxxxxx",},];const columns: ColumnsType<DataType> = [ {title: "Name",dataIndex: "name",key: "name",},{title: "Age",dataIndex: "age",key: "age",},{title: "Address",dataIndex: "address",key: "address",},];return (<Table<DataType>dataSource={data}columns={columns}onRow={(record) => {return {onClick: (e) => handleSingleClick(e, record);,onDoubleClick: (e) => handleDoubleClick(e, record),};}}/>);
};export default MyTable;