简体   繁体   中英

useRef to create a cellEditor in ag-grid in React

I have a questions on how to use the useRef Hook in React combined with the ag-grid component to create a persisent cellEditor. In the following Github example, there is an example on how to access the new value after the user has edited the field in the 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}/>;
})

What I don't understand is how I can find out which row and field i am editing. Could someone point me towards what I am missing?

The grid refresh api provides the interface for working with cells. The props param has everything you need.

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
}

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM