ag-Grid：框架组件缺少 getValue() 方法

Question

我有这个专栏定义：

headerName: "Date of birth",
field: "geburtsdatum",
editable:true,
cellEditorFramework: ChildGeburtstagEditor,
onCellValueChanged: (params: any) => {
    console.log("New param" + params.newValue); //This value is every time null
},
resizable: true,

ChildGeburtstag编辑器：

import React, {useState} from 'react';
...

interface State {
    value: string;
}

interface Props {
    value: any;
    getValue: any; //Tried to set getValue here
}

const ChildGeburtstagRenderer: React.FC<Props> = (props) => {
    const [state, setState] = useState<State>({
        value: "2019-08-08",
    });

    function getValue(): string { //THIS FUNCTION CANT BE FOUND?!?!?
        return "Test";
    }

    return (
        <>
            ... some code...
        </>
    );
}

//EDIT: IF I add this line here I get ChildGeburtstagRenderer undefined
ChildGeburtstagRenderer.prototype.getValue = () => "Text";
    export default ChildGeburtstagRenderer;

每次离开编辑器（单击离开）时，返回值每次都是 null，并且我收到 ag-grid 消息：

“ag-Grid：框架组件缺少 getValue() 方法”

如何告诉 ag-grid 我在代码中有 getValue 函数？

//解决方案 我正在使用带有打字稿的功能组件。这对我有用

interface State {
    value: string;
}

interface Props {
    value: any;
}

const ChildGeburtstagEditor: React.FC<Props> = (props, ref) => {
    const [state, setState] = useState<State>({
        value: props.value,
    });

    useImperativeHandle(ref, () => {
        return {
            getValue: () => {
                return state.value;
            }
        };
    });

    return (
        <>
            <TextField
                id="standard-name"
                label="Name"
                className={classes.textField}
                value={state.value}
                onChange={(evt) => {setState({...state, value: evt.target.value})}}
                margin="normal"
              />
        </>
    );
};
export default forwardRef(ChildGeburtstagEditor);

Answer 1

ag-Grid（和 ag-grid-react）的下一个版本将提供在 ag-Grid 中使用钩子的完整支持和文档，但现在您需要知道的是您需要用

forwardRef

包装您的钩子并使用

getValue

公开预期的生命周期方法（如

useImperativeHandle

）。

export default forwardRef((props, ref) => {
    const inputRef = useRef();
    useImperativeHandle(ref, () => {
        return {
            getValue: () => {
                return inputRef.current.value;
            }
        };
    });
    return <input type="text" ref={inputRef} defaultValue={props.value}/>;
})

这对于单元格渲染器和单元格编辑器来说效果很好，但对过滤器等的支持将仅在下一个版本（22.0.0）中提供。

Answer 2

纪元 2024 这仍然没有修复。我发现你也可以使用这个：

this.filterParams.valueGetter(params)

而不是

this.filterParams.getValue(params.node)

。

这是遵循文档中提供的示例。