反应受控内容可编辑

Question

您好，我正在尝试创建一个 React contenteditable div 组件，它的工作方式类似于输入字段，但具有一些我想要实现的附加功能，但由于功能很少，我想自己实现它，而不是使用 slatejs 或Draftjs 做了这么多繁重的工作。

我的想法是我应该有一个受控的 contenteditable div，我可以监听插入一些文本的事件。（就像反应控制组件的一般思想）

它看起来很简单。我应该监听 keydown 事件，并且在每个事件上我只需将相应的字符（event.key）插入到我的状态中。但是我发现在带有触摸键盘的移动设备上，此值（event.key）始终为“无法识别”。

有时输入事件也有一个“数据”属性来确定插入的值。但在触摸键盘中，该事件没有“数据”属性。

所以我的问题是我们如何才能以在桌面和移动设备上全局工作的方式插入字符？Draftjs 和 slatejs 作者如何检测插入的字符（即使在触摸移动设备上）并更新其状态？

Answer 1

我终于得到了答案，事实证明，在 React 中，有一个名为 的事件onBeforeInput，可以在 contenteditable div 上使用，并且有一个名为 的属性data，该属性对应于将要插入的文本（在移动设备和桌面上）。该活动可以取消，因此您可以致电preventDefault并更新您的状态。不幸的是，任何 React 文档中都没有提到这个事件（！！），我从他们的 github 存储库上的一个问题中找到了它。