React MUI 数据网格：如何获取 React-Context 当前行的索引

Question

背景

在我的应用程序中，有一个 MUI 数据网格。每行中有 3 个自定义组件：

RowSlider

、

RowDate

和

RowLock

分别实现 MUI 组件

Slider

、

Date Picker

和

Button

。

组件

Slider

和

Date Picker

都有一个名为

disabled

的属性，如下所示：

（*是为了更容易可视化）

<Slider  defaultValue={3} step={1} marks min={1} max={5} ***disabled={rowStates[rowIndex]}***/>

功能目标

我想要实现的功能是，当按下锁定按钮时，它会将

disabled

属性设置为

true

，对于两个组件，再次按下时将其设置为

false

，依此类推依此类推。

我希望此功能作用于每一行，即，我不希望一行中的“锁定按钮”影响另一行中组件的

disabled

属性

问题

现在，我的问题是我无法找到从 MUI 数据网格获取行索引的方法。

这就是我的数据网格列声明的样子：

import * as React from 'react';
import { GridColDef, GridCellParams } from '@mui/x-data-grid';
import RowDate from '../ui/table/row-date/RowDate';
import RowLock from '../ui/table/row-lock/RowLock';
import RowSlider from '../ui/table/row-slider/RowSlider';


export const columns: GridColDef[] = [
    {field: 'id', headerName: 'ID', flex: 1, headerClassName: 'header-cell', cellClassName: 'body-cell'},
    {field: 'word', headerName: 'Word', flex: 1, headerClassName: 'header-cell', cellClassName: 'body-cell' },
    {field: 'romanization', headerName: 'Romanization', flex: 1, headerClassName: 'header-cell', cellClassName: 'body-cell'},
    {field: 'definition', headerName: 'Definition', flex: 1, headerClassName: 'header-cell', cellClassName: 'body-cell'},
    {field: 'comfortability', headerName: 'Comfortability', flex: 1, headerClassName: 'header-cell', cellClassName: 'body-cell',
        renderCell: (params) => {
            return(
                
                <RowSlider rowIndex={params.rowNode.depth}></RowSlider>
            );
        }
    },
    {field: 'lastModified', headerName: 'Last Checked', flex: 1, headerClassName: 'header-cell', cellClassName: 'body-cell',
        renderCell: (params) => {
            return(
                    <RowDate rowIndex={params.rowNode.depth}></RowDate>
            );
        }
    },
    {field: 'lock', headerName: 'Lock', flex: 1, headerClassName: 'header-cell', cellClassName: 'body-cell',
        renderCell: (params) => {
            return(
                    <RowLock rowIndex={params.rowNode.depth}></RowLock>            
                );
        }
    },
]

export interface TableRow {
    id: number,
    word: string;
    romanization: string,
    definition: string;
    comfortability: number;
    lastModified: Date | null;
    lock: boolean;
};

如您所见，我需要能够将数据网格“行索引”（如果存在）作为道具传递到这些组件中，但我还没有找到这样做的方法。

我计划将此索引与在

React Context

内声明的

Table.tsx

绑定：

import * as React from 'react';
import { createContext, useContext } from 'react';
import { Box, alpha, styled } from '@mui/material';
import { DataGrid, GridToolbar, GridRowsProp, GridColDef, gridClasses, GridFilterModel, GridColumnVisibilityModel} from '@mui/x-data-grid';
import { columns} from '../../data/DataInterface';
import { data } from '../../data/Data';
import { DataTable } from './styled-data-grid/StyledDataGrid';

const RowStateContext = createContext<{ rowStates: boolean[]; setRowState: (index: number, value: boolean) => void } | undefined>(undefined);

export const useRowStateContext = () => {
  const context = useContext(RowStateContext);
  return context;
};

export default function Table() {

  const [rowStates, setRowStates] = React.useState<boolean[]>(Array(data.length).fill(false)); // Initialize rowStates array

  const setRowState = (index: number, value: boolean) => {
    const newStates = [...rowStates];
    newStates[index] = value;
    setRowStates(newStates);
  };


  const [filterModel, setFilterModel] = React.useState<GridFilterModel>({
      items: [],
      quickFilterExcludeHiddenColumns: false,
      quickFilterValues: [],
    });

  const [columnVisibilityModel, setColumnVisibilityModel] = React.useState<GridColumnVisibilityModel>({});

  return(
      <RowStateContext.Provider value={{ rowStates, setRowState }}> // Provide row state context

        <DataTable
          checkboxSelection
          columns={columns}
          columnVisibilityModel={columnVisibilityModel}
          disableColumnFilter
          disableDensitySelector
          disableRowSelectionOnClick
          filterModel={filterModel}
          getRowClassName={(params) =>
            params.indexRelativeToCurrentPage % 2 === 0 ? 'even' : 'odd'
          }
          onColumnVisibilityModelChange={(newModel) =>
              setColumnVisibilityModel(newModel)
          }
          onFilterModelChange={(newModel) => setFilterModel(newModel)}
          rows={data}
          slots={{ toolbar: GridToolbar }}
          slotProps={{ toolbar: { showQuickFilter: true } }}
        />

      </RowStateContext.Provider>
  );
}

当前结果

截至目前，我能够生成的功能是，按下其中一个“锁定”按钮会导致每一行中的所有组件被禁用，即，其范围不受限制。

我相信解决方案位于

renderCell

属性中的列声明中：

{field: 'lock', headerName: 'Lock', flex: 1, headerClassName: 'header-cell', cellClassName: 'body-cell',
        renderCell: (params) => {
            return(
                    <RowLock rowIndex={params.rowNode.depth}></RowLock>            
                );
        }
    },

但是，我不知道该怎么做。正如你所看到的，

rowNode.depth

是我最新的（懒惰的）尝试。如果我需要切换到

Data Table

而不是

Data Grid

，请告诉我（如果这样会更容易）

Answer 1

我使用钩子实现了一个解决方案。让我知道这个是否奏效。 MuiDataGridLock