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 我在代码中有 function getValue？

//解决方案我使用的是功能组件，typescript。 这对我有用

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包装您的钩子并公开预期带有useImperativeHandle的生命周期方法（如getValue ）。

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) 中可用。