如何使用ant和ReactJs在表行中传递datasource字段作为onclick函数的参数?

如何使用ant和ReactJs在表行中传递datasource字段作为onclick函数的参数?,reactjs,antd,tablerow,Reactjs,Antd,Tablerow,我正在使用ant和ReactJs处理一个项目,遇到如下问题:我的数据源是一个对象数组,其中包含一些字段,如id、photoUrl、名称、电话和电子邮件。我使用这个数据源来创建一个表,其中包含列avatar、name、phone number、email和action。操作是一种链接文本编辑,还具有onClick函数,用于编辑表行的信息 <a href="javascript:;" onClick={this.handleEditBtnClick(id)}> E

我正在使用ant和ReactJs处理一个项目,遇到如下问题:我的数据源是一个对象数组,其中包含一些字段,如id、photoUrl、名称、电话和电子邮件。我使用这个数据源来创建一个表,其中包含列avatar、name、phone number、email和action。操作是一种链接文本编辑,还具有onClick函数,用于编辑表行的信息

<a href="javascript:;" onClick={this.handleEditBtnClick(id)}>
            Edit
          </a>
现在,我想将每行数据的id传递给edit onClick函数的参数。到目前为止,我尝试的是将column操作的dataIndex设置为“id”,并将id作为参数传递给onClick函数,如下面的代码所示,但它只是挂起了屏幕

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

<a href="javascript:;" onClick={this.handleEditBtnClick(id)}>
            Edit
          </a>
{
标题:“行动”,
数据索引:“id”,
键:“id”,
呈现:(id)=>(
),

},
将handleeditbtclick函数绑定到onClick的方式是错误的

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

<a href="javascript:;" onClick={this.handleEditBtnClick(id)}>
            Edit
          </a>
当前的实现是在每次渲染时触发handleeditbtclick函数调用,而不是使用onClick绑定函数。然后,渲染进入无限循环,屏幕挂起

{
  title: 'Action',
  dataIndex: 'id',
  key: 'id',
  render: (id) => (
    <span>
      <a href="javascript:;" onClick={() => {this.handleEditBtnClick(id)}}>
        Edit
      </a>
    </span>
  ),
},
<a href="javascript:;" onClick={this.handleEditBtnClick(id)}>
            Edit
          </a>
{
标题:“行动”,
数据索引:“id”,
键:“id”,
呈现:(id)=>(
),
},
您也可以参考这篇文章,进一步解释这个问题

<a href="javascript:;" onClick={this.handleEditBtnClick(id)}>
            Edit
          </a>
希望能有帮助。如有任何混淆,请还原。

更改此选项:

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

致:

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

如果您只想编辑该行,还可以使用如下状态对其进行管理:

<a href="javascript:;" onClick={this.handleEditBtnClick(id)}>
            Edit
          </a>
{
  title: 'Action',
  dataIndex: 'id',
  key: 'id',
  render: (id) => (
    <span>
      <a href="javascript:;" onClick={() => {this.setState({selected: id})}}>
        Edit
      </a>
    </span>
  ),
},
{
标题:“行动”,
数据索引:“id”,
键:“id”,
呈现:(id)=>(
),
},