AG Grid集成自定义react-select多选编辑器时getValue()方法失效问题

问题描述 #

我用react-select实现了AG Grid的自定义多选编辑器，编辑时能正常打开组件并选择值，选中内容也能正常打印。但AG Grid在编辑结束时本该自动调用getValue()获取变更值，现在useImperativeHandle已经触发，可getValue()从未执行，选中值传不到AG Grid里。监听单元格编辑开始、变更、结束事件，只有开始和结束事件触发，且事件返回的新旧值都是undefined。手动调用props.api.stopEditing()也没用，参考Mantine多选编辑器集成案例也没找到问题。

原代码 #

import React, { useState, useImperativeHandle, forwardRef, useRef, useEffect } from 'react';
import Select from 'react-select';
import type { ICellEditorParams } from "ag-grid-community";
import type { ICellEditorReactComp } from "ag-grid-react";

interface OptionType {
    label: string;
    value: { id: string | number }; // Allow id to be string or number
}

interface AgGridMultiSelectEditorParams extends ICellEditorParams {
    values: OptionType[]; // Array of relation records formatted for react-select
}

interface AgGridMultiSelectEditorRef extends ICellEditorReactComp {
    getValue: () => OptionType[]; // Assuming you're returning OptionType[]
}

const AgGridMultiSelectEditor = forwardRef<AgGridMultiSelectEditorRef, AgGridMultiSelectEditorParams>(
    (props, ref) => {
        const [selectedRecords, setSelectedRecords] = useState<OptionType[]>([]);  // Initialize with an empty array
        const inputRef = useRef(null);  // This will help manage react-select focus
        console.log("Editor ref:", ref);

        // When the component mounts, ensure react-select is focused
        useImperativeHandle(ref, () => {
            console.log("useImperativeHandle triggered");
            return {
                getValue: () => {
                    console.log("getValue called. Selected records:", selectedRecords);
                    return selectedRecords;
                },
                isPopup: () => true,
                afterGuiAttached: () => {
                    console.log("Editor attached");
                    inputRef.current?.focus();  // Focus react-select when the editor is attached
                }
            };
        });


        useEffect(() => {
            console.log("Component mounted");
            return () => {
                console.log("Component unmounted");
            };
        }, []);

        return (
            <Select
                ref={inputRef}  // Use the inputRef for handling focus
                value={selectedRecords}  // Bind selectedRecords to the value prop
                // onChange={(newSelected) => {
                //     console.log("Selected values:", newSelected);  // Log selected values
                //     setSelectedRecords(newSelected || []);  // Update state on change
                // }}
                onChange={(newSelected) => {
                    setSelectedRecords(newSelected || []);
                    setTimeout(() => {
                        props.api.stopEditing();  // Forcefully tell ag-Grid to stop editing and call getValue()
                    }, 2000);
                }}
                options={props.values}  // Pass available options from props
                isMulti  // Enable multi-select
            />
        );
    }
);

export default AgGridMultiSelectEditor;

问题根源分析 #

1. ICellEditorReactComp接口实现不完整：缺少AG Grid要求的init方法，无法接收单元格初始值，导致AG Grid无法识别编辑器的初始状态，进而影响编辑结束时的值获取逻辑。
2. 状态未关联单元格初始值：selectedRecords初始化为空数组，没有从AG Grid传递的单元格参数中读取初始选中值，AG Grid无法感知编辑器的状态变化。
3. stopEditing调用时机错误：setTimeout延迟调用可能导致AG Grid的编辑上下文已失效，且状态更新未完成时就触发结束编辑，导致getValue无法获取最新值。

修复方案 #

修复后的完整代码 #

import React, { useState, useImperativeHandle, forwardRef, useRef, useEffect } from 'react';
import Select from 'react-select';
import type { ICellEditorParams } from "ag-grid-community";
import type { ICellEditorReactComp } from "ag-grid-react";

interface OptionType {
    label: string;
    value: { id: string | number };
}

interface AgGridMultiSelectEditorParams extends ICellEditorParams {
    values: OptionType[];
}

interface AgGridMultiSelectEditorRef extends ICellEditorReactComp {
    getValue: () => OptionType[];
}

const AgGridMultiSelectEditor = forwardRef<AgGridMultiSelectEditorRef, AgGridMultiSelectEditorParams>(
    (props, ref) => {
        const [selectedRecords, setSelectedRecords] = useState<OptionType[]>([]);
        const inputRef = useRef(null);

        useImperativeHandle(ref, () => ({
            // 实现AG Grid要求的init方法，接收并初始化单元格初始值
            init: (params: AgGridMultiSelectEditorParams) => {
                const initialValues = params.value || [];
                // 匹配props.values中的选项，确保初始值格式正确
                const matchedInitial = params.values.filter(option => 
                    initialValues.some(val => val.value.id === option.value.id)
                );
                setSelectedRecords(matchedInitial);
            },
            getValue: () => {
                console.log("getValue called. Selected records:", selectedRecords);
                return selectedRecords;
            },
            isPopup: () => true,
            afterGuiAttached: () => {
                inputRef.current?.focus();
            }
        }), [props.values]);

        // 可选：选中值变化后自动结束编辑（根据业务需求决定是否启用）
        useEffect(() => {
            // props.api.stopEditing(true); // true表示保存编辑结果
        }, [selectedRecords, props.api]);

        return (
            <Select
                ref={inputRef}
                value={selectedRecords}
                onChange={(newSelected) => {
                    setSelectedRecords(newSelected || []);
                }}
                options={props.values}
                isMulti
            />
        );
    }
);

export default AgGridMultiSelectEditor;

关键修复点说明 #

• 添加init方法：实现AG Grid要求的init接口，从单元格参数中读取初始值并同步到组件状态，让AG Grid能正确识别编辑器的初始状态。
• 关联初始值：通过匹配props.values中的选项，确保初始值格式与react-select要求一致，避免状态不匹配问题。
• 优化stopEditing时机：移除不必要的setTimeout，让AG Grid的默认编辑结束逻辑（点击单元格外、按Enter/Tab键）自动触发getValue()，或通过useEffect在状态稳定后主动结束编辑。

额外注意事项 #

• 列定义配置：确保列定义中设置editable: true，并在cellEditorParams中正确传递values选项数组。
• 值格式化：如果需要将多选数组转换为显示文本，需为列配置valueFormatter。
• 编辑结束触发：默认情况下，AG Grid会在点击单元格外、按Enter或Tab键时结束编辑，此时会自动调用getValue()。若需选择后立即结束编辑，可在onChange中调用props.api.stopEditing(true)。

内容的提问来源于stack exchange，提问作者Marvin Lee