如何使用ReactJS实现点击一键删除动态表格所有行

实现删除全部行的逻辑非常简单，你所有的表格行数据都存在shop状态中，直接清空这个状态、同步重置计数即可：

1. 新增删除全部的处理函数

const handleDeleteAll = () => {
  // 清空表格数据
  setShop([])
  // 重置计数，比你原有写法setCount(count - count)可读性更高
  setCount(0)
}

2. 给删除全部按钮绑定事件

<button onClick={handleDeleteAll}>删除全部</button>

如果需要增加操作二次确认避免误删，可以加一层判断：

const handleDeleteAll = () => {
  if(window.confirm('确定要删除所有行？该操作无法撤销')) {
    setShop([])
    setCount(0)
  }
}

这个方案符合React状态更新的最佳实践，不需要遍历数组操作，执行效率更高。

内容的提问来源于stack exchange，提问作者noobcode0000