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

Question

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

现在，我想将每一行中数据的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>
  ),
},

您也可以参考此solution，它进一步说明了此问题

希望有帮助。恢复任何混乱。

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