javascript - 将处理程序函数作为道具传递。我如何让父母知道点击了哪个孩子？

Question

所以我有一个看起来像这样的父功能组件：

import React, { useState, useEffect } from 'react';

import './resources/projects.css';
import ProjectsObject from './resources/projectDetailsObject';
import ProjectCard from './ProjectCard';

const Projects = () => {
    const projectsArray = Object.keys(ProjectsObject);

    const initialState = {};
    for (let i = 0; i < projectsArray.length; i++) {
        initialState[projectsArray[i]] = false;
    }

    console.log(initialState);

    const [toggleObject, setToggleObject] = useState(initialState);

    const handleClick = (e) => {
        // setToggleArray(() => {
        //     const newToggles = [];
        //     for (let i = 0; i < toggleArray.length; i++) {
        //         if (i === index) newToggles.push(true);
        //         else newToggles.push(false);
        //     }
        //     console.log(newToggles);
        //     return newToggles;
        // });
        console.log(`clicked item at index: ${}.`)
    }
    return (
            <section className="projects">
                {projectsArray.map((project, index) => (
                    <ProjectCard 
                        toggled={toggleObject[project]} 
                        key={index} 
                        project={ProjectsObject[project]}
                        handleClick={handleClick}
                        index={index}
                    />)
                )}
            </section>
    )
}

export default Projects;

我正在尝试将点击处理程序传递给子 div/article 元素

下面是子组件的样子：

import React from 'react';
import Projects from './resources/projectDetailsObject'

const ProjectCard = ({ project, toggled, handleClick, index }) => {
    console.log(project);
    console.log(toggled);
    console.log(index);

    let displayedContent = !toggled ? (
        <article className="single-project" data-id={index} onClick={(e) => handleClick(e)}>
            <div className="snakeLists project-title">{Projects[project.id].title}</div>
            <div className="clone"></div>
        </article>
    ) : (
        <article className="single-project" data-id={index} onClick={(e) => handleClick(e)}>
            <div className="description">
                <h2>{Projects[project.id].title}</h2>
                <p>{Projects[project.id].description.text}</p>
                <br></br><a href={Projects[project.id].description.link}><h2>check it out.</h2></a>
            </div>

            <div className="snippet">
                <img src={Projects[project.id].img.src} alt={Projects[project.id].img.alt}/>
            </div>
        </article>
    );

    return (
        <>
            {displayedContent}
        </>
    );
}

export default ProjectCard;

目前我无法弄清楚如何从点击的孩子那里获取任何值。我尝试给子组件返回中data-id={index}的<article>元素。

然后我尝试 console.loge.target.dataset.id以及e.currentTarget.dataset.id. 这两个都没有定义。

我如何引用哪个孩子被点击？我需要这个来设置父母的状态。

谢谢

标签： javascripthtmlreactjsdom-eventsstate