如何在TextBox输入值后聚焦到Grid指定单元格

核心思路 #

监听输入框内容变化，利用DataGrid内置API定位目标行，完成自动滚动与单元格聚焦操作。

具体实现步骤 #

1. 获取DataGrid实例引用
   使用useRef获取DataGrid实例，用于调用其内置方法：

   import { useRef } from 'react';
   import { DataGrid } from '@mui/x-data-grid';
   
   const gridRef = useRef<DataGrid>(null);
   

2. 编写输入处理逻辑
   在输入框的onChange事件中，解析输入编号，定位目标行并执行滚动和聚焦：

   const handleInputJump = (e: React.ChangeEvent<HTMLInputElement>) => {
     const targetNumber = e.target.value.trim();
     if (!targetNumber || !gridRef.current) return;
   
     // 根据编号获取目标行索引（假设编号对应行的id字段，可按需替换为实际字段）
     const targetRowIndex = gridRef.current.getRowIndex(targetNumber);
     if (targetRowIndex === -1) return;
   
     // 滚动到目标行
     gridRef.current.scrollToIndexes({ rowIndex: targetRowIndex });
     // 聚焦目标行的第一列单元格（第二个参数为列索引，可根据需求修改）
     gridRef.current.setCellFocus(targetRowIndex, 0);
   };
   

3. 绑定组件与事件
   将处理函数绑定到输入框，同时给DataGrid添加ref：

   <TextField
     label="输入单元格编号"
     onChange={handleInputJump}
     inputProps={{ 
       inputMode: 'numeric', 
       pattern: '[0-9]*',
       placeholder: '例如：601'
     }}
     sx={{ mb: 2 }}
   />
   
   <DataGrid
     ref={gridRef}
     rows={rows} // 你的数据源
     columns={columns} // 你的列配置
     {...otherProps}
   />
   

注意事项 #

• 确保输入编号与DataGrid行数据的唯一标识字段（如id）匹配，若使用其他字段，需调整getRowIndex的参数逻辑
• setCellFocus的第二个参数为列索引，可根据需要修改为目标列的索引
• 输入框添加数字输入限制，避免无效输入干扰定位逻辑

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