如何通过代码设置@silevis/reactgrid指定单元格的焦点？

直接操作DOM元素调用focus()的方式行不通，因为ReactGrid内部维护了自己的状态管理体系，原生DOM焦点不会同步组件内部的激活单元格状态，所以才会出现「控制台打印焦点事件但单元格不高亮、输入仍指向原单元格」的情况。

正确的做法是使用ReactGrid官方提供的API来操作：

步骤1：获取ReactGrid的API实例 #

有两种方式可以拿到API：

• 使用useReactGridApi钩子（函数组件内推荐使用）

import { useReactGridApi } from '@silevis/reactgrid';

// 在你的表格组件内部
const api = useReactGridApi();

• 通过组件ref访问

import { ReactGrid, ReactGridRef } from '@silevis/reactgrid';
import { useRef } from 'react';

const gridRef = useRef<ReactGridRef>(null);

// 在需要的地方获取API
const api = gridRef.current?.api;

// 渲染组件时绑定ref
<ReactGrid ref={gridRef} columns={columns} rows={rows} />

步骤2：调用API设置焦点单元格 #

使用setFocusedCell方法，传入目标单元格的行索引和列索引即可，这个方法会同步更新组件内部状态，包括高亮样式和输入上下文：

// 假设要聚焦到rowIdx行、columnIdx列（注意索引从0开始，需和你的行列配置对应）
if (api) {
  api.setFocusedCell({
    rowIndex: rowIdx,
    columnIndex: columnIdx
  });
}

额外：设置焦点后直接进入编辑模式 #

如果需要设置焦点后立即允许输入，可以接着调用startEditing方法：

if (api) {
  api.setFocusedCell({ rowIndex: rowIdx, columnIndex: columnIdx });
  api.startEditing();
}

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