ReactGrid中DropdownCell无法展开的实现问题求助

你遇到的核心问题是：没有通过状态管理维护单元格的isOpen属性，同时缺少自定义下拉单元格的渲染逻辑。ReactGrid不会自动处理自定义单元格的交互，需要你手动实现状态切换和渲染逻辑，具体步骤如下：

1. 用状态管理Rows数组 #

首先要把rows变成组件的状态变量，这样修改单元格属性后才能触发ReactGrid重新渲染：

import { useState, useEffect } from 'react';

function ScheduleFeed() {
  const [rows, setRows] = useState<Row[]>([]);
  // 假设你通过API获取data和newDates的逻辑在这里
  useEffect(() => {
    // 当API数据加载完成后初始化rows
    if (data.length > 0 && newDates) {
      setRows(getRows(data, newDates));
    }
  }, [data, newDates]);

  // 其他原有代码...
}

2. 实现单元格点击切换下拉状态 #

添加handleCellClick函数，用来切换目标单元格的isOpen属性，同时关闭其他行的下拉菜单：

const handleCellClick = (args: any) => {
  const { rowId, cell } = args;
  if (cell.type !== "dropdown") return;

  // 找到状态列的索引（对应columns里的"status"列）
  const statusColIndex = columns.findIndex(col => col.columnId === "status");

  setRows(prevRows => {
    return prevRows.map(row => {
      const updatedCells = row.cells.map((cellItem, idx) => {
        // 处理当前点击的单元格：切换isOpen
        if (row.rowId === rowId && idx === statusColIndex) {
          return {
            ...cellItem,
            isOpen: !(cellItem as DropdownCell).isOpen
          } as DropdownCell;
        }
        // 关闭其他行的下拉菜单
        if (idx === statusColIndex && cellItem.type === "dropdown") {
          return {
            ...cellItem,
            isOpen: false
          } as DropdownCell;
        }
        return cellItem;
      });
      return { ...row, cells: updatedCells };
    });
  });
};

3. 实现下拉选项选择逻辑 #

添加handleDropdownSelect函数，用来更新选中值并关闭下拉菜单：

const handleDropdownSelect = (rowId: string | number, selectedValue: string) => {
  const statusColIndex = columns.findIndex(col => col.columnId === "status");

  setRows(prevRows => {
    return prevRows.map(row => {
      if (row.rowId !== rowId) return row;
      
      const updatedCells = row.cells.map((cellItem, idx) => {
        if (idx === statusColIndex && cellItem.type === "dropdown") {
          return {
            ...cellItem,
            selectedValue,
            isOpen: false
          } as DropdownCell;
        }
        return cellItem;
      });
      return { ...row, cells: updatedCells };
    });
  });

  // 这里可以调用你的handleChanges函数，将更新同步到后端
  // handleChanges(...)
};

4. 自定义DropdownCell渲染组件 #

ReactGrid不知道如何渲染dropdown类型的单元格，需要你自定义渲染器：

const DropdownCellRenderer = (props: any) => {
  const { cell, rowId } = props;
  const selectedOption = cell.values.find(opt => opt.value === cell.selectedValue);

  return (
    <div style={{ position: 'relative', width: '100%', height: '100%' }}>
      <button
        onClick={(e) => {
          e.stopPropagation();
          handleCellClick(props);
        }}
        disabled={cell.isDisabled}
        style={{ width: '100%', height: '100%', border: 'none', background: 'transparent', textAlign: 'left', padding: '0 8px', cursor: 'pointer' }}
      >
        {selectedOption?.label || '选择状态'}
      </button>
      {cell.isOpen && (
        <ul style={{ position: 'absolute', top: '100%', left: 0, right: 0, background: 'white', border: '1px solid #ccc', listStyle: 'none', padding: 0, margin: 0, zIndex: 1000 }}>
          {cell.values.map(option => (
            <li
              key={option.value}
              onClick={() => handleDropdownSelect(rowId, option.value)}
              style={{ padding: '8px', cursor: 'pointer' }}
              onMouseEnter={(e) => e.currentTarget.style.background = '#f0f0f0'}
              onMouseLeave={(e) => e.currentTarget.style.background = 'white'}
            >
              {option.label}
            </li>
          ))}
        </ul>
      )}
    </div>
  );
};

5. 配置ReactGrid使用自定义渲染器 #

在ReactGrid组件中添加cellRenderers属性，注册你的下拉单元格渲染器，并绑定onCellClick事件：

<ReactGrid
  stickyTopRows={1}
  rows={rows}
  columns={columns}
  onCellsChanged={handleChanges}
  onCellClick={handleCellClick}
  cellRenderers={{
    dropdown: DropdownCellRenderer
  }}
/>

关键说明 #

• ReactGrid的自定义单元格完全由你控制交互逻辑，必须通过状态管理（useState）来更新单元格属性
• 点击按钮时要调用e.stopPropagation()，避免触发ReactGrid的行选中或其他全局点击事件
• 切换isOpen时要关闭其他行的下拉菜单，避免多个下拉同时展开

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