onClick() 事件不在地图功能中显示点击项目的信息

我有呈现列表中所有项目的数据。并且有一个导航按钮适用于单击并显示 2 个选项(编辑、删除)。问题是当我单击一个项目导航按钮时,它会显示所有项目的选项。它必须只触发一个项目的 onClick 函数


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


    const closeDrawer = () => {

        setDrawerIsOpen(false)

    }


    const openDrawer = () => {

        setDrawerIsOpen(true);

    }

下面是渲染的项目


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>

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


这是示例:https://codesandbox.io/s/laughing-fast-swf1o?file=/src/ App.js


慕的地10843
浏览 76回答 1
1回答

偶然的你

调用该函数时需要过滤自行车openDrawer。假设您的状态filteredBikes最初将等于您所有的自行车。然后,当您将所选自行车的 id 传递给 时,openDrawer您需要根据 的当前状态更新此状态filteredBikes,选择 id 等于传递的自行车。
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript