在表格外单击时如何取消选择行？ [使用：Material-UI DataGrid]

Question

我正在使用 Material-UI 表来显示我的数据，但在取消选择所选行时我陷入了困境。

因此，当用户单击表格外部时，应取消选择行。

这是我的代码

const showData2 = (e,data) => {
        console.log('selection',e)
    }

<div style={{ height: 180, width: "100%", backgroundColor:'white' }}>
                        <DataGrid
                            rows={cases}
                            density='compact'
                            columns={columnsCases}
                            pageSize={3}
                            hideFooterSelectedRowCount={true}
                            rowHeight={40}
                            onRowSelected = {(e)=>{showData(e)}}
                            onSelectionChange= {(e)=>{showData2(e)}}
                        />
                    </div>

选择工作完美，但在表外单击时似乎无法取消选择行

我将不胜感激任何想法和帮助。

谢谢！！

Answer 1

使用

ClickAwayListener

检测单击事件是否发生在元素外部。它监听文档中某处发生的点击。

https://material-ui.com/components/click-away-listener/

Answer 2

使用 ClickAwayListener 和 Typescript 取消选择行示例

1. 从数据网格导入 GridRowId 类型以及您需要的任何其他类型或组件

   import { DataGrid, GridColDef, GridRowId } from '@material-ui/data-grid';

2. 为 DataGrid 上的 SelectionModel 属性设置本地状态，并将其初始化为空数组。

   const [selectionModel, setSelectionModel] = useState<GridRowId[]>([]);

3. 添加 DataGrid 组件作为 ClickAwayListener 的子组件...以及其他 DataGrid 道具。

    <ClickAwayListener onClickAway={() => setSelectionModel([])}>
              <DataGrid
                {...otherProps}
                checkboxSelection // <= works with or without checkbox selection
                selectionModel={selectionModel}
                onSelectionModelChange={({ selectionModel }) =>
                  setSelectionModel(selectionModel)
                }
              />
    </ClickAwayListener>
   

当然，如果你不使用 Typescript，你可以删除这些类型。

Answer 3

美好的一天，

就像 @Omar EL KHAL 所说的 ClickAwayListener 工作得很好。

第一步： 定义 onSelectionModelChange 和 handleClickAway 函数。

const handleSelection = (newSelection) => {
    if (newSelection)
    {
        setSelectionModel(newSelection.selectionModel);
    }
    else
    {
        setSelectionModel(null);
    }
}
const handleClickAway = () => {
  handleSelection(null);
};

第二步：将您的选择模型定义为状态
对于此步骤，我选择在组件状态中设置选择模型，以允许其他函数设置值。

const [selectionModel, setSelectionModel] = React.useState([]);

第三步： 设置 onSelectionModelChange 和 SelectionModel 属性
在数据网格中设置 props 属性如下。

<ClickAwayListener onClickAway={handleClickAway}>
    <DataGrid 
    onSelectionModelChange={handleSelection}
    selectionModel={eventSelectionModel}
    />
</ClickAwayListener>

一旦你保存并让 NPM 做它的事情，你就应该可以工作了。
我个人在单个选择模型上对此进行了测试，但它也应该适用于多个选择模型。

附：我也使用功能组件而不是分类组件来完成此操作。理论是一样的，只是不使用 useState，而是使用 this.setState。

快乐编码！
麻布

Answer 4

不需要额外的状态。您可以简单地在 ClickAwayListener 上调用 setSelectionModel 函数，如下所示：

const apiRef = useGridApiRef();

<ClickAwayListener onClickAway={() => apiRef.current.setSelectionModel([])}>
// your Data Grid 
</ClickAwayListener>