Antd：如何获取特定单元格点击中的整行值？

Question

问题陈述

在我的 react 项目中（使用 antd 表示表格），我有一个包含一些行和列的大表。我需要在单击一个单元格时获取行值，或者在单击另一个单元格时获取一个单元格中的单元格数据。

示例：

在下面给出的示例中，当单击Active 列的任何单元格时，我还需要电子邮件值，然后执行一些操作（例如 API 调用等）。而且似乎没有任何更清洁的方法可以做到这一点。

如果观察到，

• 可以为列提供自定义render，但它仅具有该特定列的值（check onClick of button）。所以目前看来没用。
• Table 有onRow 属性，但它会在单击任何单元格时触发。这意味着我需要进行自定义处理，从长远来看这看起来不太好。如果有 n 列有 n 个动作，我需要有 n 个（或更多）条件。每次单击单元格都需要有一些不同的操作，因此随着添加越来越多的功能，代码将变得更加混乱。此外，我需要依赖附加到 html 标签的数据（例如 id、class 等）并编写看起来很复杂的额外逻辑。

有没有更清洁/更好的方法来做到这一点？

const Table = antd.Table
const Button = antd.Button

class App extends React.Component {
  render() {
    const dataSource = [
      {
        email: 'sunil@gmail.com',
        active: true,
      },
      {
        email: 'anil@gmail.com',
        active: false,
      },
    ];
    const columns = [
      {
        title: 'Email',
        dataIndex: 'email',
        key: 'email',
      },
      {
        title: 'Active',
        dataIndex: 'active',
        key: 'active',
        align: 'center',
        render: (d) => <div className="btn-wrap" style={{ width: "200px" }}><Button onClick={(e) => { console.log("column click", e.target.value, d) }}>Click</Button></div>
      },
    ];

    return (
      <div>
        <Table
          columns={columns}
          dataSource={dataSource}
          onRow={(record, recordIndex) => ({
            onClick: event => { console.log("onRow onClick", event.target, event.target.className, record, recordIndex) } 
          })}
        />
      </div>
    )
  }
}

ReactDOM.render(<App />, document.getElementById("root"))

.as-console-wrapper {
  overflow: scroll !important;
  top: 0 !important;
  right: 0 !important;
  width: 50% !important;
  left: 50% !important;
  height: 100% !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/antd/4.6.1/antd.min.js" integrity="sha512-rPqRMX/4jFDJThNjfMJdEWy7cLU+ZonHIBTzHmy5OkHdaT6wZmZozvXgs7KvybTNdCDGa537RB2bURRg+LztKw==" crossorigin="anonymous"></script>
<div id="root"></div>

Answer 1

Ant design 让你可以访问单元格的render方法的第二个参数中的record/row data

render: (text, record, index) => ....

您可以在单击活动单元格时使用该记录来检索所选行的电子邮件

见 sn-ps

const Table = antd.Table
const Button = antd.Button

class App extends React.Component {
  render() {
    const dataSource = [{
        email: 'sunil@gmail.com',
        active: true,
      },
      {
        email: 'anil@gmail.com',
        active: false,
      },
    ];
    const columns = [{
        title: 'Email',
        dataIndex: 'email',
        key: 'email',
      },
      {
        title: 'Active',
        dataIndex: 'active',
        key: 'active',
        align: 'center',
        render: (text, record, index) => < div className = "btn-wrap"
        style = {
          {
            width: "200px"
          }
        } > < Button onClick = {
          (e) => {
            console.log("corresponding email is :", record.email)
          }
        } > Click < /Button></div >
      },
    ];

    return ( <
      div >
      <
      Table columns = {
        columns
      }
      dataSource = {
        dataSource
      }
      /> <
      /div>
    )
  }
}

ReactDOM.render( < App / > , document.getElementById("root"))

.as-console-wrapper {
  overflow: scroll !important;
  top: 0 !important;
  right: 0 !important;
  width: 50% !important;
  left: 50% !important;
  height: 100% !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/antd/4.6.1/antd.min.js" integrity="sha512-rPqRMX/4jFDJThNjfMJdEWy7cLU+ZonHIBTzHmy5OkHdaT6wZmZozvXgs7KvybTNdCDGa537RB2bURRg+LztKw==" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/antd/4.6.1/antd.min.css" integrity="sha512-2SGI5T/y8FJNyBbuUYsZlNRqQ3ZAbJ3fgd41UQcvEXM+LLnBg9qyHqopKO88/w09uaweOv4HbLsFez0hIH4A+Q==" crossorigin="anonymous" />
<div id="root"></div>
<div id="root"></div>