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

Posted 2023-02-22

【中文标题】React - onClick() 事件不在地图功能中显示点击项目的信息

【英文标题】：React - onClick() event don't show clicked item's information in map function

【发布时间】：2021-02-03 14:45:24

【问题描述】：

我有呈现列表中所有项目的数据。并且有一个导航按钮适用于单击并显示 2 个选项（编辑、删除）。问题是当我单击一个项目导航按钮时，它会显示所有项目的选项。只需要触发一个item的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

【参考方案1】：

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

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

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

【讨论】：

我做不到。我在这里创建了一个示例，链接了我的确切问题，请在此处查看。 codesandbox.io/s/laughing-fast-swf1o?file=/src/App.js

知道了，你不想过滤，你只想显示活动自行车上的动作，对吧？如果是这种情况，我建议您将状态从boolean 更改为string | null，初始状态为null，然后将id 传递给openDrawer，如onClick=() => openDrawer(bike.id)，然后在函数中您可以设置活动ID。然后您可以将drawerIsOpen && "visible" 更改为drawerIsOpen === bike.id 或类似的东西。最后，您需要在想要关闭操作菜单时重置状态，方法是调用closeDrawer 并将状态设置为null。