如何在React中使用refs禁用所有事件



我使用Material ui中的TreeView,并且有一个文本字段用于搜索屏幕中的其他项目。TreeView和Textfield没有任何关系。

因此,当我单击TreeView节点,并在文本字段中键入一个字符时,在一个字符之后,它将失去焦点

因此,我决定为Treeview创建一个ref,如果用户单击Treeview以外的元素,它应该禁用Treeview的所有事件。

这可能吗?请告诉我。

提前谢谢。

TreeView支持各种键盘导航功能,例如在节点之间移动箭头键,以及将文本字符移动到包含以键入字符开头的文本的节点。在TreeItem中,使用onKeyDown事件,在为可能的导航处理字符后,它调用event.prventDefault((。这可以防止事件在输入字段中键入默认效果。

您可以通过将onKeyDown={e => e.stopPropagation()}添加到您的输入中来防止keyDown事件在焦点位于您的输入上时传播到TreeItem来解决此问题,如下所示。

此处的示例代码:CodeSandBox

相关内容

  • 没有找到相关文章

最新更新