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

【问题标题】：How to deselect row when clicked outside the table? [used: Material-UI DataGrid]在表格外单击时如何取消选择行？ [使用：Material-UI DataGrid]
【发布时间】：2021-01-15 17:00:00
【问题描述】：

我正在使用 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>

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

如果有任何想法和帮助，我将不胜感激。

谢谢！！

【问题讨论】：

标签： material-ui

【解决方案1】：

你可以使用 ClickAwayListener

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

【讨论】：

【解决方案2】：

美好的一天，

就像@Omar EL KHAL 所说，ClickAwayListener 完美运行。

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

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

第二步： 将您的 selectionModel 定义为 State
对于这一步，我选择在组件状态下设置 selectionModel 以允许其他函数设置值。

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

第三步： 设置 onSelectionModelChange 和 selectionModel 属性
如下设置Data Grid中的props道具。

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

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

附言我也使用功能组件而不是分类组件来做到这一点。理论是相同的，只是不使用 useState，而是使用 this.setState。

快乐编码！
麻麻

【讨论】：

又是我......所以在测试了更多之后，我发现当你点击表格时其他元素会重新渲染。对我来说它是一个按钮组，当我单击按钮组时，它会将一个非常重要的状态设置为未定义。

【解决方案3】：

使用带有 Typescript 的 ClickAwayListener 取消选择行示例

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

import { DataGrid, GridColDef, GridRowId } from '@material-ui/data-grid';
为 DataGrid 上的 selectionModel 属性设置本地状态，并将其初始化为一个空数组。

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

将 DataGrid 组件添加为 ClickAwayListener 的子项...以及您的其他 DataGrid 道具。

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

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

【讨论】：