Question

嗨，我已经映射了一些名为“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 参数。我可以看到它，但是当我点击时什么也没有发生。任何帮助都会很棒！

Answer 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>

反应功能组件与映射的子功能组件与 onClick 功能

1 个答案: