时间戳

首页 > 解决方案 > React - onClick() 事件不在地图功能中显示点击项目的信息

javascript - React - 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

标签： javascriptreactjs

解决方案

openDrawer调用函数时需要过滤自行车。

假设您的状态filteredBikes最初将等于您所有的自行车。

然后，当您将所选自行车的 id 传递给 时，openDrawer您需要根据 的当前状态更新此状态filteredBikes，选择 id 等于传递的自行车。

推荐阅读