单击它后如何获取组件的ID - React

Question

我在 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）

Answer 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>
  );
};

单击它后如何获取组件的ID - React

How to get component's id after clicking on it - react

javascript

reactjs

use-context