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

Question

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

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={`${i}Row`}>
                        <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)); 但结果仍然相同。

标签： javascriptreactjsreactstrap

Answer 1

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

改变这个：

onClick={singleDelete}

对此：

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

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