Ant Design Table中复选框禁用与取消勾选功能异常问题

我是前端新手，在使用Ant Design的Table和Checkbox组件时，想实现点击按钮后取消勾选并禁用表格内所有复选框的功能。目前已经实现了禁用效果，但复选框无法正常被勾选。

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

const data = [
  {
    name: 'John Doe',
    age: 30,
    disabled: false,
  },
  {
    name: 'Jane Doe',
    age: 25,
    disabled: false,
  },
  {
    name: 'Peter Smith',
    age: 40,
    disabled: false,
  },
];

const App = () => {
  const [disableAll, setDisableAll] = useState(false);

  const [checked, setChecked] = useState(true);
  const [disabled, setDisabled] = useState(false);

  const toggleDisable = () => {
    setDisabled(!disabled);
    setChecked(false);
  };

  const onChange = (e) => {
    setDisableAll(e.target.checked);
  };

  const columns = [
    {
      title: 'Name',
      dataIndex: 'name',
    },
    {
      title: 'Age',
      dataIndex: 'age',
    },
    {
      title: 'Disable',
      dataIndex: 'disabled',
      render: (_, dataIndex) => (
        <Checkbox
          checked={checked}
          disabled={disabled}
          onChange={onChange}
        ></Checkbox>
      ),
    },
  ];

  return (
    <div>
      <Button
        style={{ margin: '0 10px' }}
        type="primary"
        size="small"
        onClick={toggleDisable}
      >
        {!disabled ? 'Disable' : 'Enable'}
      </Button>
      <Table columns={columns} dataSource={data} rowKey="name" />
    </div>
  );
};

export default App;

预期行为 #

• 初始状态：所有复选框未勾选且可操作
• 可单独勾选任意复选框
• 点击按钮后：所有复选框取消勾选并被禁用

核心问题是所有复选框共用了同一个checked和onChange状态，导致单个复选框无法独立控制勾选状态。需要为每一行的复选框维护独立的勾选状态，同时统一控制禁用状态。

修改后的代码如下：

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

const data = [
  {
    name: 'John Doe',
    age: 30,
    disabled: false,
  },
  {
    name: 'Jane Doe',
    age: 25,
    disabled: false,
  },
  {
    name: 'Peter Smith',
    age: 40,
    disabled: false,
  },
];

const App = () => {
  // 统一控制所有复选框的禁用状态
  const [disabledAll, setDisabledAll] = useState(false);
  // 维护每一行复选框的勾选状态，用name作为唯一标识
  const [checkedRows, setCheckedRows] = useState({});

  const toggleDisable = () => {
    setDisabledAll(!disabledAll);
    // 禁用时清空所有勾选状态
    if (!disabledAll) {
      setCheckedRows({});
    }
  };

  // 单个复选框的勾选事件，精准更新对应行的状态
  const handleCheckboxChange = (name, e) => {
    setCheckedRows(prev => ({
      ...prev,
      [name]: e.target.checked
    }));
  };

  const columns = [
    {
      title: 'Name',
      dataIndex: 'name',
    },
    {
      title: 'Age',
      dataIndex: 'age',
    },
    {
      title: 'Disable',
      dataIndex: 'disabled',
      render: (_, record) => (
        <Checkbox
          checked={checkedRows[record.name] || false}
          disabled={disabledAll}
          onChange={(e) => handleCheckboxChange(record.name, e)}
        />
      ),
    },
  ];

  return (
    <div>
      <Button
        style={{ margin: '0 10px' }}
        type="primary"
        size="small"
        onClick={toggleDisable}
      >
        {!disabledAll ? 'Disable' : 'Enable'}
      </Button>
      <Table columns={columns} dataSource={data} rowKey="name" />
    </div>
  );
};

export default App;

修改说明 #

1. 将全局checked状态替换为checkedRows对象，用每条数据的name作为键，存储对应复选框的勾选状态，实现独立控制。
2. 新增handleCheckboxChange方法，接收当前行的name参数，精准更新对应行的勾选状态。
3. 点击禁用按钮时，清空checkedRows对象实现取消所有勾选，同时切换disabledAll状态控制所有复选框禁用。
4. 复选框的checked属性绑定对应行的状态值，默认设为false。

内容的提问来源于stack exchange，提问作者Ryo Matsuzaka