如何在React中传递prop以及(事件)到onClick回调?

Question

我试图添加一个"编辑加载"按钮，在每一篇文章中添加，因为它是显示的。我需要按钮来传递文章。id}作为onClick函数的道具它被称为:handleEdit。当EditLoadModal的showEdit切换到open时，我可以使用文章。id通过更新传递给EditLoadModal组件的loaddid prop来获取关于'article'的正确数据。

这样我就可以在EditLoadModal.js中使用该ID来提取相关数据，并使用更新后的信息写回数据库。

<EditLoadModal
loadID={loadID}
showEdit={showEdit}
handleClick={handleEdit}
/>
<Content>
{props.loading && (
<img alt="" src={require("./image/spinning-arrow.gif")} />
)}
{props.articles.length > 0 &&
props.articles.map((article, key) => (
<Article key={key}>
<SharedActor>
<a>
<img src={article.actor.image} alt="" />
<div>
<span>{article.actor.title}</span>
<span>
{article.actor.date.toDate().toLocaleDateString()}
</span>
<span>{article.id}</span>
</div>
</a>
<a
href="/LoadManager"
onClick={handleEdit}
className="theme_btn"
>
Edit Load
</a>
</SharedActor>

这里是handleEdit函数

const [showEdit, setShowEdit] = useState("close");
const [loadID, setLoadId] = useState("1");
const handleEdit = (e) => {
e.preventDefault();
if (e.target !== e.currentTarget) {
return;
}
switch (showEdit) {
case "open":
setShowEdit("close");
break;
case "close":
setShowEdit("open");
break;
default:
setShowEdit("close");
break;
}
};

我在想，我可以只是添加setlodid (idProp)的道具，得到传递内部handleEdit(article.id)。但我不知道该怎么做。

也许有更好的方法?

谢谢你的帮助!

Answer 1

<a
href="/LoadManager"
onClick={(e) => handleEdit(e, article.id)}
className="theme_btn"
>
Edit Load
</a>

基本上不直接将handleEdit传递给锚元素，而是有一个单独的回调来调用handleEdit。这样你就可以向函数传递任何你想要的参数。