如何解决通过反应中的项目列表进行映射并分别编辑每个项目
我正在处理从API获得的项目列表。正确渲染。但是,我在您单击的列表的每个项目中都渲染了一个按钮,然后,该项目变成一种输入形式,该输入与该项目中元素的数量一样多,以使其可编辑。我已经尝试了以下代码,但是一旦单击按钮,它将把所有项目变成一种输入形式,而不是仅将我单击的项目变成:
{orderWithID.data.order_items.map((item,index,array) => {
if (!isEditActive) {
{
return <tr>
<td>#{item.index}</td>
<td>{item.name}</td>
<td>{item.quantity}</td>
<td>{item.price}</td>
<td>
<div className="delete-items-wrapper">
<div>-</div>
<div className="edit-delete-items">
<img className="edit-img" src={edit}
onClick={() => {
setEditActive(!isEditActive);
}
}
/>
{index > 0 ? <div className="recycle-
bin"><img src={recycle_bin} onClick=
{() => {
postRemoveItem(orderWithID.data._id,item._id);
loadOrderWithID(orderWithID.data._id);
}} /></div> : null}
</div>
</div>
</td>
</tr>
}
}
else {
{ return <div>
<Form>
<input type="text" name="name"/>
<input type="text" name="price"/>
<input type="text" name="quantity"/>
<input type="text" name="instructions"/>
</Form>
</div> }
}
我该如何编辑该部分以实现我真正想要的!?预先感谢。
解决方法
像这样int 0x13
,将isEditActive
更改为等于数组中当前迭代的索引,如果您检查setEditActive(index)
,则应该仅使当前形式可见。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。