react-bootstrap-table2-toolkit分页时输入框焦点丢失及值同步异常问题

云上老周

2026-7-19

问题根源

你遇到的问题核心在于当前页的rowIndex不是全局唯一的：分页后第二页的第0行rowIndex还是0，和第一页的第0行rowIndex重复。你用rowIndex修改userList数组时，会误改第一页对应位置的数据；焦点管理也因为rowIndex重复，无法正确识别当前聚焦的是哪一页的行。

解决方案

改用每条数据的**唯一标识（比如id）**来定位数据和管理焦点，而非依赖当前页的rowIndex：

步骤1：调整状态定义

把记录焦点的focusedRowIndex改成记录焦点行的唯一id：

const [focusedRowId, setFocusedRowId] = useState(null);

步骤2：修改列配置逻辑

用行的唯一标识替代rowIndex，实现精准的数据修改和焦点判断：

{
  dataField: "newCredit",
  text: "new Credit",
  headerAlign: "center",
  align: "center",
  formatter: (cell, row, rowIndex, formatExtraData) => {
    return (
      <input
        type="text"
        value={cell}
        onChange={(e) =>
          formatExtraData.handleCreditChange(row.id, e.target.value)
        }
        onFocus={() => formatExtraData.handleFocusChange(row.id)}
        onClick={() => formatExtraData.handleFocusChange(row.id)}
        autoFocus={row.id === focusedRowId}
      />
    );
  },
  formatExtraData: {
    handleCreditChange: (rowId, value) => {
      // 通过唯一id定位目标行，避免分页索引混乱
      const newUserList = userList.map(item => 
        item.id === rowId ? {...item, newCredit: value} : item
      );
      setUserList(newUserList);
    },
    handleFocusChange: (rowId) => {
      console.log(rowId);
      setFocusedRowId(rowId);
    },
  },
};