如何在reactjs中单击删除表格行？

Posted 2023-03-23

【中文标题】如何在reactjs中单击删除表格行？

【英文标题】：How to remove table row on click in reactjs?

【发布时间】：2021-11-28 08:10:11

【问题描述】：

这是对我之前问题的补充；我试图在单击按钮时删除特定行，但是每次单击按钮时，它都会删除下一个表格行而不是其本身。这是video 的样子。我用来执行此操作的当前代码是：

const [shop, setShop] = useState([]);

const singleDelete = (d) => 
        const newArr = [...shop];
        const index = shop.findIndex((contact) => contact.id === d);
        newArr.splice(index, 1);
        setShop(newArr);


return (
        <div className="content">
         <Table>
            <tbody id="tbid">
                    
                      (shop.map((s,i) => (
                        <tr key=`$s+i` id=i value=`$iRow`>
                        <td>i</td>
                        <td>profil[i]</td>
                        <td>s</td>
                        <td></td>
                        <td>acc[i]</td>
                        <td>
                        <Button className="btn-round btn-icon" color="danger" size="sm" type="submit" onClick=singleDelete>
                              <i className="icon-simple-delete"/>
                          </Button>
                        </td>
                        </tr>
                      )))
                    </tbody>    
         </Table>
        <div>
)

我尝试过使用 setShop(shop.filter((_, index) => index !== d)); 但结果还是一样。

【问题讨论】：

d怎么会有店铺ID的值？

【参考方案1】：

也许可以尝试使用过滤器：

const singleDelete = (d) => 
    setShop(shop.filter((contact) => contact.id !== d));

【参考方案2】：

问题是您没有将 ID 传递给 singleDelete 函数。

改变这个：

onClick=singleDelete

到这里：

onClick= () => singleDelete(s.id)

如果像 @stoen 推荐的那样重写 singleDelete 函数会很好。