首页 > 解决方案 > 在 onClick 事件上传递密钥 - React

问题描述

我传递了我映射的 Hook 的密钥,如下所示:

Object.entries(userWalletIncomes).map(([key, value]) => {
                        return (
                            <div id="incomeTable" className="text-left mx-auto flex" key={key}>
                                <p className="w-32 border p-1 capitalize">{key} :</p>
                                <p className="w-32 border p-1 text-green-500">{value}€&lt;/p>
                                <button onClick={(key) => handleDeleteIncome(key)}><i className="fas fa-times text-red-400 border p-1"></i></button>
                            </div>
                        )
                    })

on click按钮上,我给出key了函数的调用。

当我记录它时,它没有给出简单的字符串,而是给了我这个:

SyntheticBaseEvent {_reactName: "onClick", _targetInst: null, type: "click", nativeEvent: MouseEvent, target: i.fas.fa-times.text-red-400.border.p-1, …}

在这个物体里面,没有我的钥匙。我不明白为什么。我的错误在哪里?

谢谢你帮助我理解

标签: javascriptreactjseventsreact-hooks

解决方案


<button onClick={(event) => handleDeleteIncome(key)}>
  <i className="fas fa-times text-red-400 border p-1"></i>
</button>

您只是在 onClick 事件中重新声明“key”变量。


推荐阅读