React 控制内容可编辑
React controlled contenteditable
你好，我正在尝试创建一个 React contenteditable div 组件，它像输入字段一样工作，但有一些我想实现的附加功能，但由于只有很少的功能，我想实现它自己而不是使用像 slatejs 或 draftjs 这样的东西来做这么多繁重的工作。
我的想法是，我应该有一个受控的 contenteditable div，我可以监听插入一些文本的事件。 （喜欢react controlled components的大意）
看起来很简单。我应该监听 keydown 事件，并且在每个事件上我只是将相应的字符 (event.key) 插入到我的状态中。但是我发现在带有触摸键盘的移动设备上，这个值 (event.key) 总是 'Unidentified'.
有时输入事件也有一个 'data' 属性 来确定插入的值。但在触摸键盘中该事件没有 'data' 属性.
所以我的问题是我们如何才能以在桌面和移动设备上全局工作的方式插入字符？ draftjs 和 slatejs 作者如何检测插入的字符（即使在触摸移动设备上）并更新它们的状态？
终于找到答案了
事实证明，在 React 中有一个名为 onBeforeInput 的事件可以用于 contenteditable div 并且有一个名为 data 的 属性 对应于将要插入的文本（在移动和桌面）。此事件是可取消的，因此您可以对其调用 preventDefault 并更新您的状态。
不幸的是，这个事件没有在任何 React 文档中提及 (!!)，我从他们的 github 回购协议中的一个问题中发现了它。
你好，我正在尝试创建一个 React contenteditable div 组件，它像输入字段一样工作，但有一些我想实现的附加功能，但由于只有很少的功能，我想实现它自己而不是使用像 slatejs 或 draftjs 这样的东西来做这么多繁重的工作。
我的想法是，我应该有一个受控的 contenteditable div，我可以监听插入一些文本的事件。 （喜欢react controlled components的大意）
看起来很简单。我应该监听 keydown 事件，并且在每个事件上我只是将相应的字符 (event.key) 插入到我的状态中。但是我发现在带有触摸键盘的移动设备上，这个值 (event.key) 总是 'Unidentified'.
有时输入事件也有一个 'data' 属性 来确定插入的值。但在触摸键盘中该事件没有 'data' 属性.
所以我的问题是我们如何才能以在桌面和移动设备上全局工作的方式插入字符？ draftjs 和 slatejs 作者如何检测插入的字符（即使在触摸移动设备上）并更新它们的状态？
终于找到答案了
事实证明，在 React 中有一个名为 onBeforeInput 的事件可以用于 contenteditable div 并且有一个名为 data 的 属性 对应于将要插入的文本（在移动和桌面）。此事件是可取消的，因此您可以对其调用 preventDefault 并更新您的状态。
不幸的是，这个事件没有在任何 React 文档中提及 (!!)，我从他们的 github 回购协议中的一个问题中发现了它。