我有呈现列表中所有项目的数据。并且有一个导航按钮适用于单击并显示 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
偶然的你
相关分类