ReactGrid中如何处理下拉单元格？实现每个选择框独立取值

问题根源 #

你的代码里用了单个状态变量控制所有下拉框的展开状态（isDropdownOpened）和选中值（selectedValue），导致所有下拉单元格的状态完全同步，无法实现独立的选中和展开逻辑。

修正后的完整代码 #

import * as React from "react";
import { render } from "react-dom";
import { ReactGrid, Column, Row, CellChange } from "@silevis/reactgrid";
import "@silevis/reactgrid/styles.css";
import "./styles.css";

const getColumns = (): Column[] => [
  { columnId: "col-1", width: 150 },
  { columnId: "col-2", width: 150 }
];

const headerRow: Row = {
  rowId: "header",
  cells: [
    { type: "header", text: "Dropdown:" },
    { type: "header", text: "Data:" }
  ]
};

// 定义下拉状态的类型
type DropdownState = {
  isOpen: boolean;
  selectedValue?: string;
};

function App() {
  // 按rowId存储每个下拉单元格的独立状态
  const [dropdownStates, setDropdownStates] = React.useState<Record<string, DropdownState>>({
    "row-1": { isOpen: false, selectedValue: undefined },
    "row-2": { isOpen: false, selectedValue: undefined }
  });

  const getRows = (): Row[] => [
    headerRow,
    {
      rowId: "row-1",
      cells: [
        {
          type: "dropdown",
          values: [
            { value: "react", label: "React" },
            { value: "vue", label: "Vue" },
            { value: "angular", label: "Angular" }
          ],
          isOpen: dropdownStates["row-1"].isOpen,
          selectedValue: dropdownStates["row-1"].selectedValue
        }
      ]
    },
    {
      rowId: "row-2",
      cells: [
        {
          type: "dropdown",
          values: [
            { value: "react", label: "React" },
            { value: "vue", label: "Vue" },
            { value: "angular", label: "Angular" }
          ],
          isOpen: dropdownStates["row-2"].isOpen,
          selectedValue: dropdownStates["row-2"].selectedValue
        }
      ]
    }
  ];

  const handleChanges = (changes: CellChange[]) => {
    if (Array.isArray(changes) && changes.length > 0) {
      changes.forEach((change) => {
        if (change.newCell && change.newCell.type === "dropdown") {
          // 根据当前变更的rowId更新对应状态
          setDropdownStates(prev => ({
            ...prev,
            [change.rowId]: {
              isOpen: change.newCell.isOpen,
              selectedValue: change.newCell.selectedValue
            }
          }));
        }
      });
    }
  };

  const rows = getRows();
  const columns = getColumns();

  return (
    <>
      <ReactGrid rows={rows} columns={columns} onCellsChanged={handleChanges} />
      <h3>Row 1 selected: {dropdownStates["row-1"].selectedValue || "none"}</h3>
      <h3>Row 2 selected: {dropdownStates["row-2"].selectedValue || "none"}</h3>
    </>
  );
}

render(<App />, document.getElementById("root"));

关键改动说明 #

• 状态存储方式调整：将全局的isDropdownOpened和selectedValue替换为dropdownStates对象，以rowId为键，存储每个下拉单元格的独立展开状态和选中值。
• 动态生成行数据：getRows方法不再依赖全局状态，而是直接从dropdownStates中读取对应行的状态，确保每个下拉单元格使用自己的状态。
• 变更处理逻辑优化：在handleChanges中，根据每个变更对应的rowId精准更新该单元格的状态，避免影响其他下拉框。

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