react中，ant design中双击事件触发单击事件解决办法

原创已于 2022-07-02 22:49:53 修改 · 2.8k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #javascript

于 2022-06-18 23:31:11 首次发布

React 同时被 2 个专栏收录

12 篇文章

订阅专栏

antd

8 篇文章

订阅专栏

该博客介绍了如何在React中使用Ant Design的Table组件。详细阐述了如何设置列定义、数据源，并添加点击和双击事件处理函数，以实现行选择和特定操作。同时，展示了如何通过`rowClassName`属性为选中行添加自定义样式。

import { Table } from 'antd';
import { Component } from 'react';
import '../css/index.css'
const columns = [
    {
        title: 'Name',
        dataIndex: 'name',
        width: 150,
    },
    {
        title: 'Age',
        dataIndex: 'age',
        width: 150,
    },
    {
        title: 'Address',
        dataIndex: 'address',
    },
];

let clickTimeChange = null;
class ListTabl extends Component {
    constructor() {
        super();
        this.state = {
            data: [],
            selectItem: {},
            selectIndex: '',
        }
    }

    componentDidMount() {
        const data = [];
        for (let i = 0; i < 100; i++) {
            data.push({
                key: i,
                name: `Edward King ${i}`,
                age: 32,
                address: `London, Park Lane no. ${i}`,
            });
        }

        this.setState({
            data
        })

    }

    onClickEvent = (record, ind, event) => {
        // console.log('onClickEvent=========', record, ind);
        if (clickTimeChange) {
            clearTimeout(clickTimeChange);
        }
        // console.log('onClickEvent0000000000000', record, ind);
        clickTimeChange = setTimeout(() => this.getSelectReport(), 300)
    }

    getSelectReport = () => {
        console.log('getSelectReport=========');
        clearTimeout(clickTimeChange);
    }

    onDoubleClickEvent = (record, ind, event) => {
        // event.stopPropagation(); //阻止默认事件
        console.log('onDoubleClickEvent=========', record, ind);
        clearTimeout(clickTimeChange);  // 清除延时
        // event.preventDefault();
        this.setState({
            selectItem: record,
            selectIndex: ind
        });
    }

    render() {
        const { data, selectIndex } = this.state;
        console.log('render=========');
        return (
            <Table
                rowClassName={(record, ind) => {
                    if (ind === selectIndex)
                        return 'mySelfClassName'
                }}
                columns={columns}
                dataSource={data}
                onRow={(record, ind) => {
                    return {
                        onClick: event => this.onClickEvent(record, ind, event), // 点击行
                        onDoubleClick: event => this.onDoubleClickEvent(record, ind, event),
                        //   onContextMenu: event => {},
                        //   onMouseEnter: event => {}, // 鼠标移入行
                        //   onMouseLeave: event => {},
                    };
                }}

                pagination={{
                    pageSize: 50,
                }}

                scroll={{
                    y: 240,
                }}
            />
        )
    }
};

export default ListTabl