typescript+react+antd实现表格内容的删除

最新推荐文章于 2025-05-22 17:48:33 发布

袖子味

最新推荐文章于 2025-05-22 17:48:33 发布

阅读量772

点赞数 1

分类专栏：前端文章标签： typescript 前端 react.js

本文链接：https://blog.youkuaiyun.com/weixin_44401906/article/details/121567057

版权

前端专栏收录该内容

14 篇文章

订阅专栏

该博客展示了如何在React应用中创建一个简单的表格，并实现数据删除功能。通过使用useState钩子来管理状态，当点击表格中的删除按钮时，根据ID过滤数据并更新表格状态。代码包括了表格列定义，以及一个自定义的删除行函数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

代码如下：

import React from "react"
import { useState } from "react";
import { Table, Space } from 'antd';
import 'antd/dist/antd.css'

function TableTest() {

    const initData = [
        {
            id: '1',
            name: 'John Brown',
            age: 32,
        },
        {
            id: '2',
            name: 'Jim Green',
            age: 42,
        },
        {
            id: '3',
            name: 'Joe Black',
            age: 32,
        },
    ];

    let [data, setState] = useState(initData)

    //删除
    const deleteRow = (id: number): any => {
        console.log(id);
        const newData: any = data.filter((row: any) => {
            return row.id !== id
        }
        )
        setState(newData)
    }

    const clickHandler = (id: number) => {
        const a: number = id
        return (event: React.MouseEvent) => {
            deleteRow(id);
            event.preventDefault();
        }
    }

    const columns = [

        {
            title: 'id',
            dataIndex: 'id',
            key: 'id',
        },
        {
            title: 'name',
            dataIndex: 'name',
            key: 'name',
        },
        {
            title: 'age',
            dataIndex: 'age',
            key: 'age',
        },

        {
            title: 'action',
            key: 'action',
            render: (record: any) => (
                <Space size="middle">
                    <a onClick={clickHandler(record.id)}>Delete</a>
                </Space>
            ),
        },
    ];

    return (
        <div>
            <Table dataSource={data} columns={columns} />
        </div>
    )
}
export default TableTest;