Javascript 如何在子组件中通过onClick事件将特定数据的id从子组件发送到父组件

这是我在react中的组件，我正在从子级渲染一个课程虚拟数据列表。单击div，我想通过onClick事件将该特定课程的id发送给我的父组件。但我不知道如何从孩子那里发送数据，以及如何在家长那里捕获数据

儿童：

import React, { useState } from "react";
import classes from "./Modules.module.css";
import { COURSES_DATA } from "../../data/dummy_course_data";

const Modules = (props) => {
  const moduleDescriptionChangeHandler = () => {};

  return (
    <div className={classes.Modules}>
    <h1>Modules</h1>
    {COURSES_DATA.map((module) => (
    <div
      key={module.id}
      className={classes.ModuleItem}
      onClick={props.clicked.bind(module.id)}
    >
      <img src={module.icon} alt="icon" />
      <h2>{module.name}</h2>
    </div>
  ))}
</div>
 );
};
export default Modules;

import React，{useState}来自“React”；
从“/Modules.module.css”导入类；
从“./../DATA/dummy_course_DATA”导入{COURSES_DATA}”；
常量模块=（道具）=>{
const moduleDescriptionChangeHandler=（）=>{}；
返回(
模块
{COURSES_DATA.map（（模块）=>(
{module.name}
))}
);
};
导出默认模块；

家长：

import React, { useState } from "react";
import Modules from "../components/Modules/Modules";
import ModuleDescription from "../components/Modules/ModuleDescription/ModuleDescription";
import classes from "./ModulesPage.module.css";

const ModulesPage = (props) => {
const [moduleId, setModuleId] = useState("");

const onClickDescriptionChangeHandler = (childmoduleId) => {
  setModuleId(childmoduleId);
 //console.log("childmoduleId", childmoduleId);
};

return (
  <div className={classes.ModulesPage}>
  <div className={classes.moduleItem}>
    <Modules clicked={onClickDescriptionChangeHandler} />
  </div>

  <div className={classes.moduleDescription}>
    <ModuleDescription />
  </div>
</div>
);
};

 export default ModulesPage;

import React，{useState}来自“React”；
从“./组件/模块/模块”导入模块；
从“./组件/模块/模块描述/模块描述”导入模块描述；
从“/modulepage.module.css”导入类；
常量模块页面=（道具）=>{
常量[moduleId，setModuleId]=useState（“”）；
const onClickDescriptionChangeHandler=（childmoduleId）=>{
setModuleId（childmoduleId）；
//log（“childmoduleId”，childmoduleId）；
};
返回(
);
};
导出默认模块页面；

看起来您错误地理解了bind方法的工作原理。尝试道具。单击（module.id） there@dm.shpak在添加您所说的内容后，值将进入父级，但我尝试将console.log放入父级what id coming，它显示首次加载页面时，课程数据的所有id都进入父级，尽管我没有单击任何内容。您无法将

此
值绑定到箭头函数。如果要使用，需要从第二个参数开始传递参数
this.clicked.bind（null，module.id）
。但是您也可以只传递
（）=>这个。单击（module.id）
还请记住，隐式传递的
事件仍然会被传递，但将是所有绑定参数之后的最后一个参数。@pilchard是的，您是对的，我没有在单击的函数中传递null，而是传递了这个。单击（…）这将是道具。点击（…），因为我使用的功能组件感谢你。