创建一个可控的contenteditable，也适用于触控手机

Question

嗨我正在尝试创建一个反应性的contenteditable div组件，其作用类似于输入字段但具有一些我想要实现的其他功能，但由于只有很少的功能，我想自己实现它而不是使用某些东西像slatejs或draftjs这样做很重的。

我的想法是，我应该有一个受控制的contenteditable div，我在插入一些文本的事件上听。 （像react controlled components）的总体思路

它看起来很简单。我应该听keydown事件和每个事件我只是将相应的字符（event.key）插入我的状态。但是我发现在带触摸键盘的移动设备上，这个值（event.key）总是“Unidentified”。

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

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

Answer 1

我终于得到了答案 事实证明，在响应中有一个名为onBeforeInput的事件可以在contenteditable div上使用，并且有一个名为data的属性，对应于要插入的文本（在移动和桌面上） ）。此事件已取消，因此您可以在其上调用preventDefault并更新您的状态。 不幸的是，这个事件在任何反应文档（!!）中都没有被提及，我从他们的github回购中找到了它。