useRef 在 React 的 ag-grid 中创建一个 cellEditor

Question

我有一个关于如何在 React 中使用 useRef Hook 结合 ag-grid 组件来创建持久性 cellEditor 的问题。在下面的 Github 示例中，有一个关于用户在 ag-grid 中编辑字段后如何访问新值的示例：


export default forwardRef((props, ref) => {
    const inputRef = useRef();
    useImperativeHandle(ref, () => {
        return {
            getValue: () => {
                return inputRef.current.value;
            }
        };
    });

    useEffect(() => {
        // https://github.com/facebook/react/issues/7835#issuecomment-395504863
        setTimeout(() => inputRef.current.focus(), 10)
    }, []);
    return <input type="text" ref={inputRef} defaultValue={props.value}/>;
})

我不明白的是如何找出正在编辑的行和字段。有人可以指出我所缺少的吗？

Answer 1

网格刷新api 提供了使用单元格的界面。道具参数有你需要的一切。

https://www.ag-grid.com/javascript-grid-refresh/#refresh-cells

interface RefreshCellsParams {
    rowNodes?: RowNode[]; // specify rows, or all rows by default
    columns?: (string|Column)[]; // specify columns, or all columns by default
    force?: boolean; // skips change detection, refresh everything
}

useRef 在 React 的 ag-grid 中创建一个 cellEditor

useRef to create a cellEditor in ag-grid in React

reactjs

ag-grid

ag-grid-react