Ag-grid React：按下 Escape 时如何保存新值？

Question

Ag-grid React我需要在按下转义键时保存输入的值，但我不知道如何在 ag-grid 中执行此操作。

当我按 Enter - 我可以保存新值，但是使用 Esc - 我不能，它只是放弃更改我在哪里以及如何更改此行为？

Answer 1

为此，您必须实现自己的自定义编辑器组件，并且可以在其中添加逻辑以侦听输入元素内的 keyPresses，并在告诉 Grid 停止编辑之前保存该值。

请在以下 plunkr中查看此实现

首先，实现suppressKeyboardEvent告诉网格忽略转义键：

有关抑制键盘事件的文档

            {
                field: 'number',
                suppressKeyboardEvent: ({ editing, event }) =>
                    event.code === KEY_ESCAPE && editing,
                cellEditor: DoublingEditor,
                editable: true,
                width: 300,
            }

然后，在自定义编辑器组件中，你可以添加一个网格事件监听器来监听按键按下的事件（你也可以使用浏览器默认的keydown ）：

        useEffect(() => {
            props.api.addEventListener('cellKeyDown', onKeyDown);
            return () => {
                props.api.removeEventListener('cellKeyDown', onKeyDown);
            };
        }, [onKeyDown]);

最后，在侦听器内部，检查是否按下了转义键，如果是，则停止编辑单元格：

        const onKeyDown = (params) => {
            if (params.event.code === KEY_ESCAPE) {
                params.api.stopEditing();
            }
        };