如何在antd表中使用onClick获取目标值？答案

【问题标题】：How to use onClick in antd table to get target value?如何在antd表中使用onClick获取目标值？
【发布时间】：2021-12-27 11:50:45
【问题描述】：

我有一个antd 表，其中有一个可扩展的行。我想根据我单击的行呈现数据，因为每一行都有一个唯一的代码。如何获取行的目标值，从而对数据进行相应的过滤？

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

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

expandRowByClick: true,

在展开式中启用。所以我有两个问题

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

【问题讨论】：

标签： reactjs onclick antd expandable-table

【解决方案1】：

同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});
    }}
    />

【讨论】：

我试过了，但不知何故我没有收到 onClick 上的目标值？
你能拿到唱片吗？
不，我做不到。你能帮忙吗？我是新来的反应
我编辑了我的答案。
不知道为什么你不能获取一行的记录

【解决方案2】：

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

例如：

    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),
    }}

【讨论】：

您好，在标签中，onClick 转到 findId？我试过这样做，但有一些问题。如果我必须在表格中创建一个单独的按钮，那么如何在其中添加一个 onClick 以捕获记录详细信息？

你不要在表格里面添加按钮，你把它添加到表格的每一行里面，这样onClick就可以得到每一行的记录