是否有一种方法来传递一个变量作为参数在onClick处理函数中的元素?- React JS

Question

我正在尝试创建一个react应用程序，显示我使用react完成的基本项目列表。我想要存档的是，在点击&点击我"按钮时，它应该用数据数组中相应的react组件(Project)替换当前组件(默认组件)。代码——

import React, { useState } from "react";
import Birthday from "./Birthday_src/Birthday";
import Tours from "./Tours_src/App";
const data = [
{
id: 1,
btn: <Birthday />,
},
{
id: 2,
btn: <Tours />,
},
];
export default function Container() {
const [project, setProject] = useState(Default);
function Default() {
return (
<>
<div className="container">
<h1>15 Basic React Projects. </h1>
<p>that are based on react...(obviously) </p>
<div className="row row-cols-3 mt-10 mx-3 ">
{data.map((cProject, index) => {
const { id, btnP } = cProject;

return (
<div className="items" key={id}>
<p>Here goes the first project. </p>
<button
className="btn-primary btn"
id={`btn${id}`}
onClick={(e,btnP) => {
console.log(e.target.id);
console.log(btnP)
setProject(btnP);
}}
>
Click me
</button>
</div>
);
})}
</div>
</div>
</>
);
}
return <>{project}</>;
}

但是当点击按钮时，"e.target.id"工作完全正常(console.log记录各自的id)，但"btnP"显示未定义。我只需要发送当前的"btnP"以某种方式返回到useState，以便功能组件中的返回返回项目。(用户想要显示的JSX react元素，取决于他们点击的按钮)

谢谢~ iter8

Answer 1

问题是浏览器调用所有这些事件处理程序只有一个参数-事件对象-所以如果你使用一个接受多个参数的事件处理程序，除了第一个参数外，当函数被调用时(由浏览器本身)，所有的都不会传入，因此它们将获得值undefined。

这里的解决方案非常简单，因为您想要访问的btnP已经在外部作用域中可用(您正在使用map超过data的函数-此时您仍然在它内部)。因此，如果你只是从

更改函数签名

(e,btnP) => {...}

(e) => {...}

这应该完全按照你的意图工作。