Material-UI:由于失去DataGrid内部的焦点而无法删除输入值 [英] Material-UI: Cannot delete input value because of losing focus inside DataGrid

问题描述

我正在尝试使用Material-UI DataGrid .我想在表格的某一列内使用一个按钮.此按钮必须是内部带有表单的Modal.当我这样做时，我注意到我可以键入表单输入，但是我不能使用Delete键和退格键进行删除，因为失去了焦点，并且我对焦点的理解只集中在表上，而不是模式输入上.使用文档中的默认示例，我在CodeSandbox上做了一个简单的示例.来自那里的输入具有相同的行为.

I'm trying to use Material-UI DataGrid. I want to use a button inside one of the columns of the table. This button has to be a Modal with form inside. When I did it I noticed that I can typing in form inputs, but I can't delete with delete key and backspace, because focus lost and how I understood it focus was on the table, but not on the modal input. Using default examples from documentation I did a simple example on CodeSandbox. Input from there has the same behavior.

PS.然后尝试键入一些内容并按退格键.你有什么主意吗?

PS. Try to type something and backspace then. Do you have any idea?

推荐答案

这可以通过在 TextField中的 keydown 事件上调用 stopPropagation()轻松解决.这样可以防止 DataGrid 拦截您的 keydown 事件并执行自己的操作:

This can be easily solved by calling stopPropagation() on keydown event in your TextField. It prevents the DataGrid from intercepting your keydown event and do its own thing:

renderCell: () => <TextField onKeyDown={(e) => e.stopPropagation()} />

实时演示

这篇关于Material-UI:由于失去DataGrid内部的焦点而无法删除输入值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！