蚂蚁设计表点击表格单元格答案

【问题标题】：Ant design table click on tabel cell蚂蚁设计表点击表格单元格
【发布时间】：2022-03-23 00:47:05
【问题描述】：

https://codesandbox.io/s/7mo0rvl971

检查这个例子。你们可以注意到我们可以点击名称，因为他们使用标签

如何单击名称并获取内容。例如，我单击单元格“John Brown”并返回字符串“John Brown”

【问题讨论】：

标签： reactjs antd

【解决方案1】：

在最近的版本中，您可以只使用useRow 属性来设置onCLick 事件。你可以在这里看到这个：https://ant.design/components/table/#onRow-usage

【讨论】：

它适用于行点击。但不适用于细胞。

【解决方案2】：

解决方法是在

上设置data-id

<a data-id={text} onClick={this.onClick}>{text}</a>

然后

onClick = (e) => {
    console.log('Content: ', e.currentTarget.dataset.id);
  }

【讨论】：

另一种处理方式：github.com/react-component/table/pull/27#issuecomment-172420963

【解决方案3】：

如果您想在特定列上添加点击事件，您可以在您的列对象中使用onCell。

const table_columns = [
    {
        title: 'Name',
        dataIndex: 'name',
        key: 'name',
        onCell: (record, rowIndex) => {
            return {
                onClick: (ev) => {
                    console.log(record, rowIndex);
                },
            };
        },
    },
]

【讨论】：

【解决方案4】：

这是简单明了的答案

const columns = [
{
    title: 'Name',
    dataIndex: 'name',
    render:text=><Link to='/detail'>{text}</Link>
}]

const data = [
{
    key: '1',
    name: 'Organisation',
    subType: 'Kindergarten',
    ville: 'Brusseis',
    email: 'info@example.com',
    telephone: '+32477070505',
}]

【讨论】：

在 StackOverflow 上添加解释为什么你的解决方案应该有效是一种很好的做法。