如何在antd Table中使用onClick获取点击行值并实现指定单元格触发展开？

针对你的两个疑问的实现方案如下： #

常见误区提前说明

你当前写在expandable配置里的onClick是展开图标专属的点击回调，第一个参数是布尔值代表展开/收起状态，第二个参数才是当前行数据，不是事件对象，所以你原来写的e.target.value是取不到值的，属于误用。

1、实现仅点击特定单元格触发行展开 #

你已经开启了expandRowByClick: true，这个配置会默认触发整行点击展开，要实现指定单元格触发，必须先把这个配置关闭，改用受控模式控制展开状态即可，完整代码示例：

import { useState } from 'react'
import { Table } from 'antd'

// 省略其他逻辑代码
const [expandedRowKeys, setExpandedRowKeys] = useState([])

// 列配置，给需要触发展开的单元格加点击事件
const tableColumns = [
  // 其他列的配置
  {
    title: '展开操作',
    dataIndex: 'expandTrigger',
    render: (_, record) => {
      // record就是当前行的完整数据
      return <span onClick={() => toggleExpand(record.id)}>点击展开该行</span>
    }
  }
]

// 展开/收起切换逻辑
const toggleExpand = (rowId) => {
  setExpandedRowKeys(prev => 
    prev.includes(rowId) 
      ? prev.filter(id => id !== rowId) 
      : [...prev, rowId]
  )
}

// Table组件配置
<Table
  components={components}
  bordered
  dataSource={dataSource}
  columns={tableColumns}
  expandable={{
    expandedRowRender,
    expandRowByClick: false, // 关闭默认整行点击展开
    expandedRowKeys: expandedRowKeys, // 绑定受控的展开行key
    // 如果还要保留默认的展开图标，补充下面的onExpand配置同步状态即可
    onExpand: (expanded, record) => {
      toggleExpand(record.id)
    }
  }}
/>

2、获取点击行数据渲染展开区域 #

不需要额外做捕获逻辑，antd Table的expandedRowRender自带当前行数据作为入参，直接用即可：

const expandedRowRender = (record) => {
  // record就是你点击展开的那一行的完整数据，所有字段都可以直接取
  return (
    <div>
      <p>当前行唯一编码：{record.id}</p>
      {/* 在这里写你需要渲染的对应业务内容 */}
    </div>
  )
}

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