Javascript React-onClick（）事件don'；t显示单击的项目'；地图功能中的信息

我有呈现列表中所有项目的数据。还有一个导航按钮在单击时工作，并显示2个选项（编辑、删除）。问题是当我点击一个项目导航按钮时，它会显示所有项目的选项。它只能触发一个项的onClick函数

const [drawerIsOpen, setDrawerIsOpen] = useState(false);

    const closeDrawer = () => {
        setDrawerIsOpen(false)
    }

    const openDrawer = () => {
        setDrawerIsOpen(true);
    }

下面是渲染项目

bikes.map（bike=>{
{bike.title}
openDrawer（bike.id）}className=“bike-item\uuuu actions\u nav”>
编辑
去除
{抽屉打开&&}

我知道项目的索引有问题，但实际上无法解决

---

例如：

调用

openDrawer

函数时，需要过滤自行车

假设您有状态

filteredBikes

，它最初将等于您所有的自行车

---

然后，当您将所选自行车的id传递到

openDrawer

中时，您需要根据

filteredBikes

的当前状态更新此状态，选择id等于传递的自行车。

我做不到。我创建了一个示例，这里是链接我的确切问题，请检查这里。明白了，您不想过滤，是吗只是想显示活动自行车上的操作，对吗？如果是这样，我建议您将状态从

boolean

更改为

string | null

，初始状态为

null

，然后将id传递给

openDrawer

像

onClick={（）=>openDrawer（bike.id）}

然后在函数中，您可以设置活动id。然后您可以将

抽屉打开&&“可见”

更改为

抽屉打开===bike.id

或类似内容。最后，您需要在想要关闭操作菜单时重置状态，方法是调用

关闭抽屉

，并将状态设置为

null

。

bikes.map(bike => {
        <div className="bike-item">
               <small> {bike.title} </small>
        </div>
        <div onClick={()=> openDrawer(bike.id)} className="bike-item__actions_nav">
               <i className="fas fa-ellipsis-v"></i>
        </div>
        <div className={`bike-item__children_actions ${drawerIsOpen && 'visible'}`}>
               <Link to={`/update/${bike.id}`} className="bike-item_actions_icon">
                  Edit
               </Link>
              <Link className="bike-item_actions_icon">
                  Remove
              </Link>
              {drawerIsOpen && <Backdrop transparent onClick={closeDrawer} />}
        </div>