React中为Ant Design表格添加单选复选框并获取选中数据

必须用状态变量 #

肯定要，得用状态存储选中的行数据，不然点击按钮时没法获取选中的内容。

具体实现步骤 #

• 第一步：定义状态变量
  函数组件用useState，类组件用this.state，用来保存选中的行记录和对应的唯一标识：

  // 函数组件示例
  const [selectedRow, setSelectedRow] = useState(null);
  const [selectedRowKey, setSelectedRowKey] = useState([]);
  

• 第二步：配置rowSelection属性
  把rowSelection传给Table组件，设置为单选的复选框模式，同时绑定回调更新状态：

  const rowSelection = {
    type: 'checkbox',
    // 开启单选逻辑，只保留最后选中的一行
    selectedRowKeys: selectedRowKey,
    onChange: (keys, selectedRows) => {
      if (selectedRows.length > 0) {
        const latestRow = selectedRows[selectedRows.length - 1];
        setSelectedRow(latestRow);
        setSelectedRowKey([latestRow.id]); // 这里id是你的数据唯一标识字段，比如userId等
      } else {
        setSelectedRow(null);
        setSelectedRowKey([]);
      }
    },
    // 也可以用onSelect回调实现单选
    onSelect: (record, selected) => {
      if (selected) {
        setSelectedRow(record);
        setSelectedRowKey([record.id]);
      } else {
        setSelectedRow(null);
        setSelectedRowKey([]);
      }
    }
  };
  

• 第三步：给Table组件绑定rowSelection
  补全你的原代码，传入配置并设置行唯一标识：

  <TableAnt
    dataSource={users}
    columns={Usercolumns}
    rowSelection={rowSelection}
    rowKey="id" // 必须设置，用数据里的唯一标识字段
  />
  

• 第四步：点击按钮使用选中数据
  按钮点击时直接读取状态里的selectedRow即可：

  <Button onClick={() => {
    if (selectedRow) {
      console.log('选中的行数据：', selectedRow);
      // 这里写你的业务逻辑，比如提交、编辑等
    } else {
      console.log('请选择一行数据');
    }
  }}>
    使用选中数据
  </Button>
  

修正你提供的代码（翻译+语法修正） #

你写的代码存在语法错误，正确的中文注释版如下：

// 正确的rowSelection配置
const rowSelection = {
  type: 'checkbox', // 选择类型为复选框
  onSelect: (record) => { // 选中某一行时触发的回调
    console.log('当前选中的行数据：', record); // 打印选中的行记录
  }
};

注意：原代码里的onselect要改成驼峰式的onSelect，并且要修正多余的大括号结构。

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