React中如何遍历含编辑状态的对象标记指定单元格为已编辑

1. 维护单元格编辑状态 #

用useState创建状态记录每个单元格的编辑状态，推荐用对象形式（查找效率更高），键为单元格id，值为布尔值表示是否已编辑：

const [editedCells, setEditedCells] = useState({});

如果偏好数组形式（存储每个单元格的id和edited字段），可这样定义：

const [editedCells, setEditedCells] = useState([]);

2. 处理编辑事件，更新状态 #

在输入或点击事件中，将对应单元格标记为已编辑。以TextInput的onChange事件为例：

const handleCellEdit = (cellId) => {
  // 对象形式更新
  setEditedCells(prev => ({ ...prev, [cellId]: true }));

  // 若用数组形式，替换成以下代码：
  // setEditedCells(prev => {
  //   const hasCell = prev.some(cell => cell.id === cellId);
  //   if (hasCell) {
  //     return prev.map(cell => cell.id === cellId ? { ...cell, edited: true } : cell);
  //   }
  //   return [...prev, { id: cellId, edited: true }];
  // });
};

3. 动态设置单元格的className #

修改表格列配置中的className为函数（多数表格组件支持此写法），根据当前单元格id匹配编辑状态，动态添加editedCSS：

const getTbl = [
  {
    key: "custNo",
    label: "Customer",
    // 对象形式判断
    className: (item) => {
      const isEdited = editedCells[item.item.id];
      return isEdited ? "normalCSS editedCSS" : "normalCSS";
    },
    // 若用数组形式，替换成以下判断：
    // className: (item) => {
    //   const isEdited = editedCells.some(cell => cell.id === item.item.id && cell.edited);
    //   return isEdited ? "normalCSS editedCSS" : "normalCSS";
    // },
    formatter: (item) => {
      return (
        <TextInput
          id={item.item.id}
          value={item.item.value}
          onChange={() => handleCellEdit(item.item.id)}
        />
      );
    }
  }
];

补充说明 #

• 若表格组件不支持className接收函数，可在formatter中给单元格内容外层包裹容器元素，在容器上添加动态className：

  formatter: (item) => {
    const isEdited = editedCells[item.item.id];
    return (
      <div className={isEdited ? "normalCSS editedCSS" : "normalCSS"}>
        <TextInput
          id={item.item.id}
          value={item.item.value}
          onChange={() => handleCellEdit(item.item.id)}
        />
      </div>
    );
  }
  

• 无需用useEffect监听表格更新，直接在编辑事件中同步更新状态即可，避免不必要的重复渲染。

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