Reactjs 如何实现物料表的批量编辑

批量编辑是一项要求的功能，但当前库只能选择打开多个编辑，但一次只能编辑一行，如何实现批量编辑？同时编辑多行？

我通过使用

onSelectionChange

功能创建一个处理所选行的状态来实现这一点

const [allSelectedRows, setAllSelectedRows] = useState([]);

onSelectionChange={(rows) => {
  setAllSelectedRows([...rows]);
}}

之后，我生成了一个diff（使用

deep object diff

）来查看这些选定行中发生了什么变化，用新数据生成了一个数组并更新了状态

editable={{
  isEditable: (rowData) => data[rowData.tableData.id].Locked !== true,
  onRowUpdate: (newData, oldData) => new Promise((resolve) => {
    const dataUpdateArray = [...data];
    if (allSelectedRows.length && allSelectedRows.includes(oldData)) {// if there is multiple checkboxes selected
      const updatedData = updatedDiff(oldData, newData);
      allSelectedRows.map((item) => {
        return Object.assign(dataUpdateArray[item.tableData.id], updatedData);
      });
    } else {// if there is no selected checkbox, you are editing a non-checked row
      dataUpdateArray[oldData.tableData.id] = newData;
    }
    setData([...dataUpdateArray]);
    resolve();
  }),
}}

有关实现中的更多详细信息，下面是一个示例，其中包含实现此功能所需的所有代码