如何在Ant Design Table中点击后禁用按钮（TypeScript）

核心逻辑是通过React状态管理为表格每行的按钮维护独立的禁用状态，点击时更新对应行的状态来禁用按钮，具体实现如下：

函数组件实现（推荐） #

利用useState存储每行按钮的禁用状态，通过行的唯一标识（如id）区分不同按钮：

import { useState } from 'react';
import { Table, Button } from 'antd';

const ResendTable = () => {
  // 用对象存储每行按钮的禁用状态，key为行的唯一id
  const [disabledBtnMap, setDisabledBtnMap] = useState({});

  // 示例表格数据，确保每行有唯一id
  const tableData = [
    { id: 1, userName: '张三', email: 'zhangsan@example.com' },
    { id: 2, userName: '李四', email: 'lisi@example.com' },
    { id: 3, userName: '王五', email: 'wangwu@example.com' },
  ];

  const columns = [
    { title: '用户名', dataIndex: 'userName', key: 'userName' },
    { title: '邮箱', dataIndex: 'email', key: 'email' },
    {
      title: '操作',
      key: 'action',
      render: (_, record) => (
        <Button
          type="primary"
          // 根据当前行id判断是否禁用，默认不禁用
          disabled={disabledBtnMap[record.id] || false}
          onClick={() => {
            console.log('点击重发，行id：', record.id);
            // 更新状态，标记当前行按钮为禁用
            setDisabledBtnMap(prevState => ({
              ...prevState,
              [record.id]: true,
            }));

            // 这里添加你的重发业务逻辑，比如接口请求
            // 示例：模拟接口请求，失败后恢复按钮可用
            fetch(`/api/resend-email/${record.id}`)
              .then(res => res.json())
              .then(() => console.log('重发成功'))
              .catch(err => {
                console.error('重发失败：', err);
                // 请求失败时恢复按钮可点击
                setDisabledBtnMap(prevState => ({
                  ...prevState,
                  [record.id]: false,
                }));
              });
          }}
        >
          Resend
        </Button>
      ),
    },
  ];

  return <Table dataSource={tableData} columns={columns} rowKey="id" />;
};

export default ResendTable;

类组件实现 #

如果项目仍使用类组件，逻辑类似，将状态存储在this.state中：

import { Component } from 'react';
import { Table, Button } from 'antd';

class ResendTable extends Component {
  state = {
    disabledBtnMap: {},
  };

  tableData = [
    { id: 1, userName: '张三', email: 'zhangsan@example.com' },
    { id: 2, userName: '李四', email: 'lisi@example.com' },
  ];

  handleResend = (record) => {
    console.log('点击重发，行id：', record.id);
    this.setState(prevState => ({
      disabledBtnMap: {
        ...prevState.disabledBtnMap,
        [record.id]: true,
      },
    }));

    // 模拟业务请求
    fetch(`/api/resend-email/${record.id}`)
      .then(res => res.json())
      .then(() => console.log('重发成功'))
      .catch(err => {
        console.error('重发失败：', err);
        this.setState(prevState => ({
          disabledBtnMap: {
            ...prevState.disabledBtnMap,
            [record.id]: false,
          },
        }));
      });
  };

  render() {
    const columns = [
      { title: '用户名', dataIndex: 'userName', key: 'userName' },
      { title: '邮箱', dataIndex: 'email', key: 'email' },
      {
        title: '操作',
        key: 'action',
        render: (_, record) => (
          <Button
            type="primary"
            disabled={this.state.disabledBtnMap[record.id] || false}
            onClick={() => this.handleResend(record)}
          >
            Resend
          </Button>
        ),
      },
    ];

    return <Table dataSource={this.tableData} columns={columns} rowKey="id" />;
  }
}

export default ResendTable;

关键说明 #

• 必须用行的唯一标识（如id）管理状态，避免不同行按钮状态互相干扰
• 如果需要在操作完成后恢复按钮可用（比如请求失败允许重试），只需在对应逻辑中把该行id的状态改回false即可
• 状态存储用对象或Map都可以，对象写法更简洁直观

内容的提问来源于stack exchange，提问作者clever-coder