reactjs - 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,

ChildGeburtstagEditor:

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？

//解决方案 我正在使用带有 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 中使用 hooks 的完整支持和文档，但现在你需要知道的是你需要用 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) 中可用。