我正在使用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": "[email protected]"
},
谢谢您的时间。
更改此:
<a href="javascript:;" onClick={this.handleEditBtnClick(id)}>
Edit
</a>
收件人:
<a href="javascript:;" onClick={() => this.handleEditBtnClick(id)}>
Edit
</a>
将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进一步解释此问题
希望有帮助。恢复任何混乱。
如果您只想编辑行,也可以使用如下状态进行管理:
{
title: 'Action',
dataIndex: 'id',
key: 'id',
render: (id) => (
<span>
<a href="javascript:;" onClick={() => {this.setState({selected: id})}}>
Edit
</a>
</span>
),
},