將功能組件與映射的子功能組件與 onClick function 反應

Question

嗨，我已經映射了一些名為“projectsData”的 json 數據，我正在嘗試使用 setState hook“綁定”一個 onClick 事件。 單擊網格項目時，除了“onClick”不起作用之外，映射有效。 在我的情況下，我想使用來自該目標的 project.id 值更新filterproject值。

現在，當我單擊一個項目時，它什么也不做。

如何在使用功能組件時成功 map a function 到“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

在設置初始 state 時，您將點擊處理程序傳遞給名為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 function 反應

問題描述

1 個解決方案

解決方案1
0 已采納 2021-01-09 00:01:26

將功能組件與映射的子功能組件與 onClick function 反應

問題描述

1 個解決方案

解決方案1 0 已采納 2021-01-09 00:01:26

解決方案1
0 已采納 2021-01-09 00:01:26