点击后如何获取组件的ID - 反应

Posted 2023-02-21

【中文标题】点击后如何获取组件的ID - 反应

【英文标题】：How to get component's id after clicking on it - react

【发布时间】：2022-01-24 02:24:24

【问题描述】：

我在 rides-context.js 中有一个对象数组。在 RidesList.js 中，我映射数组的数据并将其传递给组件以便在屏幕上显示。

const RidesList = (props) => 
  const rideCtx = useContext(RidesContext);

  const deleteHandler= () => 
    rideCtx.onDelete(??)
  
 
  return (
    <ul className=classes.container>
      rideCtx.ridesList.map((ride) => (
        <Ride hour=ride.hour name=ride.name key=ride.key id=ride.id onDelete=deleteHandler/>
      ))
    </ul>
  );
;

现在我想在点击一个组件后删除它。为此，我必须将组件的 id 传递给位于 rides-context.js 中的函数。如何获取被点击元素的id？（onDelete连接到另一个文件中的onClick）

【参考方案1】：

您在这里想要的是使用闭包并将ride 的 id 传递给可用的位置的deleteHandler。为此，您可以将匿名函数作为onDelete 属性传递，该属性将使用ride.id 调用，如下所示：

const RidesList = (props) => 
  const rideCtx = useContext(RidesContext);

  const deleteHanlder = (id) => 
    rideCtx.onDelete(id)
  
 
  return (
    <ul className=classes.container>
      rideCtx.ridesList.map((ride) => (
        <Ride hour=ride.hour name=ride.name key=ride.key id=ride.id onDelete=() => deleteHandler(ride.id)/>
      ))
    </ul>
  );
;

【讨论】：

感谢您的解决方案，我不知道这样的东西会起作用，我尝试了不同的东西但没有想出这种想法