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;

每次我离开编辑器（点击离开）时，return 值每次都是空的，我收到 ag-grid 消息：

"ag-Grid: Framework component is missing the method 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 中使用 hooks 的完整支持和文档，但现在你需要知道的是你需要包装你的 hook使用 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) 中可用。

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

ag-Grid: Framework component is missing the method getValue()

typescript

reactjs

ag-grid