Material-UI：DataGrid/XGrid 如何检测密度变化？

Question

当用户更改密度表时，我希望可以更改操作图标的大小： 当行变得更小时，右侧的笔图标应该随之缩小，就像这样： 目前，我使用 onStageChange 来捕获表格上的所有更改，并在组件上设置一个状态变量。

           ...
           const [density, setDensity] = useState<GridDensity>();
           ...
           const actionEdit: GridColDef = {
            field: '',
            type: 'action',
            align: 'right',
            disableColumnMenu: true,
            disableClickEventBubbling: true,
            resizable: false,
            flex: 1,
            headerClassName: 'edit-theme-header',
            cellClassName: 'edit-theme-cell',
            renderCell: () => <EditAction size={density} onClick={() => alert('click')} />
          };
           ... 
           <XGrid
                .....
                onStateChange={(v) => setDensity(v.state.density.value)}
            />

代码可以运行，但是onStateChange方法会在所有状态改变时都被调用（不仅仅是密度）。 有更好的方法吗？：）

- Mr2dishes

Answer 1

我的解决方案基于 @mdmundo 的答案。

...
const [density, setDensity] = useState<GridDensity>('compact');
...
<XGrid
    ...
    className={density === 'compact' ? 'compact' : ''}
    onStateChange={v => density !== v.state.density.value && setDensity(v.state.density.value)}
/>

一点样式：

.MuiXGrid-root.compact {
   /* some style */
}

- Cava

Answer 2

您可以声明另一个图标大小的状态，并在onStateChange中进行更改。

onStateChange={(v) => {
  setDensity(v.state.density.value);
  // HERE SET ICON SIZE STATE
}

然后，将该状态值用作图标大小属性。

- mdmundo

---

谢谢您的回复，但我的问题不在那里。'setDensity'将被调用以处理网格上的所有事件，而不仅仅是密度更改时。这并不是真正的优化 :) - Mr2dishes

这非常有帮助，我稍微修改了一下，现在工作得非常好。 - Cava