React 受控内容可编辑

Question

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

我的想法是我应该有一个受控的 contenteditable div，我可以监听插入一些文本的事件。 （就像react controlled components 的一般概念）

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

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

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

Answer 1

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