我正在尝试将参数传递给我的redirectSingleLocker函数。此功能应使我进入由GUID标识的特定储物柜的详细信息页面。lockerData.map在表中显示JSON中的所有数据（我省略了代码如何填充lockerData）
现在，我想知道如何将参数传递给onClick {}，以便可以链接到表中每个记录的详细信息页面？使用我在redirectSingleLocker函数中已注释掉的硬编码guid时，它已经可以正常工作。所以我唯一的障碍是如何将GUID从lockerData传递到redirectSinglelocker函数
OrglockerTables.tsx
const OrgLockerTables: React.FC = () => {
let history = useHistory();
function redirectSingleLocker(guid) {
// let guid = "3x42Q7kU";
// history.push('/singlelocker?guid='+guid);
history.push('/singlelocker?guid=' + guid);
}
return (
<table>
<tbody>
{
lockerData.map((lockerData, index) => {
console.log('lockers:', lockerData)
return (
<tr className="row100 body" key={lockerData.id}>
{console.log('the id is', lockerData.id)}
<td className="column1">{lockerData.id}</td>
<td className="column2">{lockerData.guid}</td>
<td className="column3">{lockerData.is_currently_claimable}</td>
<td className="column4"><button onClick={redirectSingleLocker}></button></td>
</tr>
);
}
)}
</tbody>
</table>
);
};
export default OrgLockerTables;
LockerData Json
{
data: [
{
id: 1,
guid: "3x42Q7kU",
is_currently_claimable: false
},
{
id: 2,
guid: "kLzbAfMc",
is_currently_claimable: true
},
{
id: 3,
guid: "qBqtZ5oR",
is_currently_claimable: true
}
]
}
任何帮助是极大的赞赏！
尝试这个：
<td className="column4"><button onClick={() => {redirectSingleLocker(lockerData.guid)}}></button></td>
您只需创建一个匿名函数作为onClick处理程序，然后redirectSingleLocker使用guid
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句