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

【问题标题】：ag-Grid: Framework component is missing the method getValue()ag-Grid：框架组件缺少方法 getValue()
【发布时间】：2020-01-23 13:21:12
【问题描述】：

我有这个专栏定义：

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 函数？

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

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);

【问题讨论】：

您正在做的是创建外部无法访问的私有函数。你需要做的是在函数之外将公共方法定义为ChildGeburtstagRenderer.prototype.getValue = () => "Text"，看看它是否为你呈现结果
很抱歉，但我还是不明白应该在哪里写这个。在我有列定义的同一个类中？ onCellValueChanged: (params: any) => { let test = ChildGeburtstagEditor.prototype.getValue(); //这不行 },
在ChildGeburtstagRenderer 组件中，在ChildGeburtstagRenderer 函数定义之外。你可以把它放在export default ChildGeburtstagRenderer;的正上方
好的，明白了。可悲的是，我收到消息“无法设置未定义的属性'getValue'”。当我在 chrome 中调试它时，ChildGeburtstagRenderer 是未定义的。

标签： reactjs typescript ag-grid

【解决方案1】：

下一个版本的 ag-Grid（和 ag-grid-react）将提供在 ag-Grid 中使用钩子的完整支持和文档，但现在你需要知道的是你需要用 @ 包裹你的钩子987654322@ 并使用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) 中可用。

【讨论】：

我尝试了建议的实现，但我仍然得到与 OP 相同的错误。支持上述实现的最早版本的 ag-grid-react 是什么？我正在使用带有 ag-grid-react v20.2.0 的 react v16.8.6。
@SeanLandsman 您知道第 22 版发布的大致日期吗？今年、下半年、明年年底？
@Paul 我们将于明天或最迟周二发布
可悲的是，在版本 22 中，我收到消息“ag-Grid：框架组件缺少方法 getValue()”。我也无法在示例部分 (github.com/ag-grid/ag-grid-react-example) 中找到使用此 useImperativeHandle... 函数的示例也许您可以向我们展示一个使用此 useImperativeHandle 函数的工作示例？
稍后我会为未来的读者更新我的主要帖子。由于功能组件，我不得不重写我的代码有点不同。