【发布时间】：2021-04-13 00:23:09
【问题描述】：
有人知道如何防止删除键清空 react Material-UI Grid 上的单元格内容吗？
今天，当您单击一个单元格并点击 Delete 时，它会删除其内容。我想阻止它发生。
【问题讨论】：
标签： reactjs datatable material-ui
【发布时间】：2021-04-13 00:23:09
【问题描述】：
DataGrid 会将单元格数据设置为empty string，如果您在未处于编辑模式时点击 Delete 或 Backspace。如果你不喜欢这种行为，你可以通过在capture phase 的父元素中附加一个keydown 处理程序并调用stopPropagation() 来禁用它：
<div
onKeyDownCapture={(e) => {
if (e.key === "Backspace" || e.key === "Delete") {
e.stopPropagation();
}
}}
style={{ height: 400, width: "100%" }}
>
<DataGrid rows={rows} columns={columns} />
</div>
现场演示
【讨论】：
-
太棒了，我尝试了同样的事情，但使用 onKeyDown 而不是 onKeyDownCapture 但它没有用！非常感谢！
-
@HelioBentes 我忘了澄清它也应该适用于
XGrid，因为DataGrid和XGrid共享相同的内部组件，但DataGrid对免费层用户禁用了一些功能。