ag-grid自定义Ant Design下拉单元格编辑器无法赋值求助

我正在尝试为ag-grid创建自定义单元格编辑器，计划使用Ant Design的Select下拉组件，但目前无法正常工作。单元格可显示下拉选项，但点击选择后无法设置对应值。我是编程新手，附上表格组件与自定义下拉组件的代码，希望得到帮助，若需补充信息请告知。

表格组件代码 #

import DropdownComponent from "containers/sensitivityanalysis/DropdownCell";

const ParametersListsTable: React.FC = () => {
  const [rowData, setRowData] = useState([{}]);

  const [columnDefs, setColumnDefs] = useState<ColDef[]>([
    {
      field: "Description",
      headerName: "Description",
      width: 200,
      cellEditor: DropdownComponent,
      cellEditorParams: {
        values: [
          "Manifold Pressure",
          "Reservoir Pressure",
          "Bubble Point Pressure",
          "FBHP",
          "Liquid Rate",
          "Total Gas Rate",
          "Oil Rate",
          "Formation Gas Rate",
          "Limit Lift Meas Depth",
          "SG Formation Gas",
          "SG Water",
          "Oil API Gravity",
          "Static Surface Temp.",
          "BHT",
          "Choke Coefficient",
          "Surface Temperature",
          "Operating Mandre Number",
          "OPerating Valve Throughput",
          "SBHP",
          "Bean Size",
          "Minimum Require LG Rate",
          "Tubing Sizing",
          "Diameter For Lifting",
        ],
      },
    },
]);

const defaultColDef = useMemo(() => {
    return {
      resizable: true,
      filter: true,
      editable: true,
    };
  }, []);

自定义下拉组件代码 #

import { Select } from "antd";
import { useState } from "react";

const { Option } = Select;

const DropdownComponent = (props) => {
  const [selection, setSelection] = useState();
  const handleDropDown = (e) => {
    setSelection(e.target.value);
  };

  return (
    <Select
      style={{ width: "100%", height: "100%" }}
      onClick={handleDropDown}
      value={selection}
    >
      {props.values.map((item) => (
        <Option key={item} value={item}>
          {item}
        </Option>
      ))}
    </Select>
  );
};

export default DropdownComponent;

问题修复方案 #

你的代码存在三个核心问题，调整后即可正常工作：

1. 遵循Ag-Grid自定义编辑器接口规范 #

Ag-Grid的自定义单元格编辑器必须实现getValue()方法，供表格在编辑结束后获取选中值。同时需要将该方法暴露给Ag-Grid的API。

2. 替换AntD Select的事件回调 #

AntD Select的选中值回调应该用onChange而不是onClick，onClick无法正确获取选中的value。

3. 同步单元格初始值 #

编辑器的初始值需要从Ag-Grid传入的props.value获取，而非空状态。

修改后的自定义组件代码：

import { Select } from "antd";
import { useEffect, useState } from "react";

const { Option } = Select;

const DropdownComponent = (props) => {
  // 从Ag-Grid传入的props获取初始值
  const [selection, setSelection] = useState(props.value);

  // 监听props.value变化，同步编辑器状态
  useEffect(() => {
    setSelection(props.value);
  }, [props.value]);

  // 处理Select选中事件
  const handleChange = (value) => {
    setSelection(value);
  };

  // 实现Ag-Grid要求的getValue方法
  const getValue = () => {
    return selection;
  };

  // 将getValue暴露给Ag-Grid API
  props.api.setCellEditorValue(getValue);

  return (
    <Select
      style={{ width: "100%", height: "100%" }}
      onChange={handleChange}
      value={selection}
    >
      {props.values.map((item) => (
        <Option key={item} value={item}>
          {item}
        </Option>
      ))}
    </Select>
  );
};

export default DropdownComponent;

额外优化建议 #

表格组件的初始rowData可以设置一个空的Description字段，避免编辑时出现异常：

const [rowData, setRowData] = useState([{ Description: "" }]);

内容的提问来源于stack exchange，提问作者Angel Gabriel Chable Concepcio