如何使用 ant 和 ReactJs 在 table 行中将数据源字段作为 onclick 函数的参数传递？

Question

我正在使用 ant 和 ReactJs 处理项目并遇到如下问题：我的数据源是一个对象数组，其中包含一些字段，如 id、photoUrl、name、phone 和 email。我使用此数据源创建一个 table，其中包含头像、姓名、phone 号码、电子邮件和操作列。 Action是一个link文本编辑，还有一个onClick功能，用于编辑table行的信息。

现在我想将每行数据的id传递给edit onClick函数的参数。到目前为止我尝试的是将列 Action 的 dataIndex 设置为“id”并将 id 作为参数传递给 onClick 函数，如下面的代码，但它只是挂断了屏幕。

{
  title: 'Action',
  dataIndex: 'id',
  key: 'id',
  render: (id) => (
    <span>
      <a href="javascript:;" onClick={this.handleEditBtnClick(id)}>
        Edit
      </a>
    </span>
  ),
},

这是我的数据对象的示例

{
    "id": 21,
    "photoUrl": "https://dummyimage.com/600x400/d11b1b/ffffff&text=patient+21",
    "displayName": "patient 21",
    "phone": "0901993159",
    "email": "pp21@yopmail.com"
},

感谢您的宝贵时间。

Answer 1

您将 handleEditBtnClick 函数绑定到 onClick 的方式是错误的

应该是：onClick={() => {this.handleEditBtnClick(id)}}

当前的实现是在每次渲染时触发 handleEditBtnClick 函数调用，而不是将函数与 onClick 绑定。而你的渲染进入无限循环，你的屏幕挂起。

{
  title: 'Action',
  dataIndex: 'id',
  key: 'id',
  render: (id) => (
    <span>
      <a href="javascript:;" onClick={() => {this.handleEditBtnClick(id)}}>
        Edit
      </a>
    </span>
  ),
},

你也可以参考这个进一步解释这个问题

希望对您有所帮助。如有任何混淆，请回复。

Answer 2

改变这个：

<a href="javascript:;" onClick={this.handleEditBtnClick(id)}>
            Edit
          </a>

收件人：

<a href="javascript:;" onClick={() => this.handleEditBtnClick(id)}>
            Edit
          </a>

Answer 3

如果您只想编辑该行，您也可以使用这样的状态来管理它：

{
  title: 'Action',
  dataIndex: 'id',
  key: 'id',
  render: (id) => (
    <span>
      <a href="javascript:;" onClick={() => {this.setState({selected: id})}}>
        Edit
      </a>
    </span>
  ),
},

如何使用 ant 和 ReactJs 在 table 行中将数据源字段作为 onclick 函数的参数传递？

How to pass a field of datasource as parameter of onclick function in a table row using ant and ReactJs?

tablerow

reactjs

antd