使用 onClick 函数映射具有映射子功能组件的功能组件答案

【问题标题】：React functional component with mapped Child functional component with onClick function使用 onClick 函数映射具有映射子功能组件的功能组件
【发布时间】：2021-04-14 16:28:48
【问题描述】：

您好，我已经映射了一些名为“projectsData”的 json 数据，我正在尝试将 onClick 事件与 setState 挂钩“绑定”。单击网格项目时，除了“onClick”不起作用之外，映射有效。就我而言，我想用来自该目标的 project.id 值更新 filterproject 值。

现在，当我单击一个项目时，它什么也不做。

如何在使用功能组件时成功地将函数映射到“onClick”？

下面是父组件

import React, { useEffect, useState } from "react";
import projectsData from '../data/projectsData';
import Project from './Projects';

const App = (props) => {
  const [projects] = useState(() => (projectsData.map((project) => <Project id={project.id} project={project} onClick={() => {setFilterProject(project.id)}}/>)));
  const [filterproject, setFilterProject] = useState(null);


    return (
      <body>
        <div id='sepLine'>
        <div id="visHolder">
           <div id="visContainer" style={{position: "relative", width: "840px", height: "1823px"}} >
             {projects}
           </div>           
         </div>
       </div>
      </body>
    );
}

export default App;

这里是子组件 - “项目”

import React, { useRef } from "react";

const Project = (props) => { 
    const {projectClick, project} = props;

        return (
            <div className={`lineDiv gridItem y${project.start}-${project.end} ${project.kind}`} style={{positon: "absolute"}} onClick={projectClick}>
            <h5>{project.title}</h5>
            <br></br>
            <p className="year">
            <span className="yearsstart">{project.start}</span> - <span className="yearsend">{project.end}</span>
            <br></br>
            <span className="kind">{project.kind}</span>
            </p>
            </div>
        )
    }
export default Project

下面是控制台的屏幕截图，显示了其中一个映射项目及其 onClick 参数。我可以看到它，但是当我单击时没有任何反应。任何帮助都会很棒！

【问题讨论】：

不要将 react 组件存储在 state 中，存储 data/prop 值并在渲染子项时附加处理程序。

标签： javascript reactjs react-hooks

【解决方案1】：

在设置初始状态时，您将点击处理程序传递给名为 onClick 的道具

const [projects] = useState(() => projectsData.map((project) => (
  <Project
    id={project.id}
    project={project}
    onClick={() => {setFilterProject(project.id)}}
  />
));

但在组件中以projectClick 的身份访问它

const { projectClick, project } = props;

...

<div
  className={`lineDiv gridItem y${project.start}-${project.end} ${project.kind}`}
  style={{positon: "absolute"}}
  onClick={projectClick}
>
  ...
</div>

通过访问正确的道具来修复

const { onClick, project } = props;

...

<div
  className={`lineDiv gridItem y${project.start}-${project.end} ${project.kind}`}
  style={{positon: "absolute"}}
  onClick={onClick}
>
  ...
</div>

【讨论】：

啊，所以子组件是您设置属性和项目的位置，然后父组件是您将该属性映射到函数的位置。哇好。非常感谢！