ag-grid 列搜索时自动失去焦点

问题描述：

ag-grid 列搜索时自动失去焦点，因为自动失去焦点中文输入会变成英文。
每输入一个字符就失去焦点！！

问题原因与解决方案

可能原因	解决方案
组件/列定义被意外重置	确保 columnDefs 和 gridOptions 是静态或使用 useMemo/useCallback 缓存
refreshCells() 或 redrawRows() 触发全局刷新	避免不必要的刷新。如需刷新，使用 api.refreshCells({ force: false }) 或更精确的 refreshCells({ columns: ['specificColumn'], force: true })

我发现是我使用了onFilterChanged方法才导致的这个问题，我把它注释掉就不会有这个问题了。
但我的需求必须用onFilterChanged。

    const gridApiRef = useRef();
     // 当 Grid 准备就绪时，保存 API 实例并初始化状态
    const onGridReady = (params) => {
        setGridApi(params.api);

    };
    const filterChange = () => { //响应事件 - 当筛选条件改变时获取条数
        if (gridApi) {
           //获取当前展示的数据条数
            //setDataTotal(gridApi?.getDisplayedRowCount())
            //gridApi?.refreshCells({force: true })
        }
    }
<AgGridReact
ref={gridApiRef}
onGridReady={onGridReady}
rowData={tracreData}
columnDefs={columnDefs1}
gridOptions={opt}
rowSelection={'multiple'}
onFilterChanged={filterChange} //过滤条件发生变化时触发
 >
  </AgGridReact>

解决方案1：把columnDefs写成useMemo、useCallback、useState

一开始我的columnDefs就是const columnDefs1=[xxx]。会导致搜索输入时失去焦点，每输入一个字符就需要重新点一下input

改成useMmeo(推荐):

    const columnDefs1 = useMemo(() => [
        {},
        {}
    ], []); // 空依赖数组表示只在组件挂载时创建一次

AgGridReact 的columnDefs={columnDefs}

改成useCallback:

const getColumnDefs = useCallback(() => [

], []); // 依赖数组为空，表示函数只创建一次

AgGridReact 的columnDefs={getColumnDefs}

改成useState:

 const [columnDefs1,setColumnDefs1] = useState([]);
     useEffect(() => {
        setColumnDefs1([
            {}
        ]);
    }, []);

AgGridReact 的columnDefs={columnDefs1}

解决方案2：使用refreshCells({force: true })

需要在onFilterChanged里加上gridApi?.refreshCells({force: true })

 const filterChange = () => { //响应事件 - 当筛选条件改变时获取条数
        if (gridApi) {
           //获取当前展示的数据条数
            //setDataTotal(gridApi?.getDisplayedRowCount())
            gridApi?.refreshCells({force: true })
        }
    }

总结：

我建议使用useMem、useSate来解决这个问题，更方便更快。
useCallback是缓存函数的，用来解决这个问题也可以，但会引起歧义。

refreshCells({force: true })则还需要定义一个ref和onGridReady事件。