javascript - 如何通过子组件中的onClick事件将特定数据的ID从子组件发送到父组件

Question

这是我的反应组件，我正在渲染一个虚拟数据列表。在单击 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 } 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;

标签： javascriptreactjs