有没有办法在元素的 onClick 处理函数中将变量作为参数传递？ - 反应 JS

Question

我正在尝试创建一个反应应用程序，该应用程序显示我使用反应完成的基本项目的列表。 我要存档的是，单击“单击我”按钮后，它应该将当前组件（默认组件）替换为数据数组中相应的反应组件（项目）。 代码 -

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 反应元素，具体取决于他们单击的按钮.)

谢谢~iter8

Answer 1

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

这里的解决方案非常简单，因为您要访问的btnP已经在外部范围内可用（您用来map data的函数 - 此时您仍在其中）。 因此，如果您只是将函数签名从

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

至

(e) => {...}

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