reactjs - 如何在antd表中使用onClick获取目标值？

Question

我有一张antd桌子，里面有一个可扩展的行。我想根据我单击的行呈现数据，因为每一行都有一个唯一的代码。如何获取行的目标值以便相应地过滤数据？

<Table
  components={components}
  bordered
  dataSource={dataSource}
  columns={tableColumns}
  expandable={{ expandedRowRender,
  onClick: (e) =>findId(+e.target.value),
}}

我使用 onRow 吗？不确定如何onClick在antD表格或可扩展表格中使用。我也有

expandRowByClick: true,

在可扩展中启用。所以我有两个问题

1. 如何通过仅单击一个特定单元格来展开表格
2. 展开时，如何捕获单击的行，以便可以将数据相应地呈现到展开的表中？

Answer 1

您必须设置一个操作来获取列中行的记录数据。

举个例子 ：

    const tableColumns =  [
          { title: "id", dataIndex: "id", key: "id", sorter: true },
          {
            title: "Description",
            dataIndex: "description",
            key: "description",
            sorter: true
          },
          {
            title: "Action",
            dataIndex: "id",
            key: "id",
            align: "center",
            render: (text, record, index) => {
              return (
                
                  <Button
                    icon={<BsPencil />}
                    id={record.id}
                    onClick={e => console.log(e, record)}
           //record is the row data
                    size="large"
                    
                  />
    
                 
          
              );
            }
          }
        ];
    
    
    <Table
      components={components}
      // add this
      rowKey={(record) => record.id} 
      bordered
      dataSource={dataSource}
      columns={tableColumns}
      expandable={{ expandedRowRender,
      onClick: (e) =>findId(+e.target.value),
    }}

Answer 2

与 onRow、onHeaderRow、onCell、onHeaderCell 相同

   <Table
  onRow={(record, rowIndex) => {
    return {
      onClick: event => { 
         console.log(record)
      }, // click row
      onDoubleClick: event => {}, // double click row
      onContextMenu: event => {}, // right button click row
      onMouseEnter: event => {}, // mouse enter row
      onMouseLeave: event => {}, // mouse leave row
    };
  }}
  onHeaderRow={(columns, index) => {
    return {
      onClick: () => {}, // click header row
    };
  }}
/>

如果你想点击一个按钮：

<Column
        title="title"
        dataIndex="cdcName"
        key="cdcName"
        render={(text, record)=><button onClick={(e)=> console.log(e)}>{record?.cdcName}</button>}
    />

在 onExpand ：

 <Table
       
        onExpandedRowsChange={(expandedRows)=>{ }}
        expandedRowRender={row => <span>hello</span>}
        expandRowByClick
        onExpand={(expanded, record)=>{
        var keys = [];
        if(expanded){
            keys.push(record.id); // I have set my record.id as row key. Check the documentation for more details.
        }
    
        this.setState({expandedRowKeys: keys});
    }}
    />