reactjs - Material-UI XGrid - 如何防止删除键删除单元格内容

标签 reactjs datatable material-ui

有人知道如何防止删除键清空React Material-UI Grid上的单元格内容吗?

今天,当您单击某个单元格并点击删除时,它会删除其内容。我想阻止这种情况发生。

最佳答案

DataGrid 会将单元格数据设置为 empty string如果您在未处于编辑模式时点击DeleteBackspace。如果您不喜欢这种行为,可以通过在 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>

现场演示

Edit 67067211/metrial-ui-xgrid-how-to-prevent-delete-key-to-delete-cell-content

关于reactjs - Material-UI XGrid - 如何防止删除键删除单元格内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/67067211/

相关文章:

javascript - 在 React 中将数据从一个函数传递到另一个函数

javascript - 为什么要使用 JavaScript 扩展运算符来更新数组中的项目?

reactjs - 无法从 PropTypes 获取函数

reactjs - 用 Jest 进行 React + Material UI 测试

css - 如何在 MUI 中应用自定义动画效果@keyframes?

javascript - 如何使用 ReactDOM Render 渲染 React 组件

javascript - 代码会随着时间降低浏览器性能

javascript - 在复选框上检查始终使用 Angular JS 获取警报中的第一行值

jsf - 如何为数据表列创建复合组件?

laravel - 使用 Yajra Datatable 获取 Laravel Datatable 列的总和