React control contenteditable

问题描述 投票:3回答:1

hi,我正在尝试创建一个react contenteditable div组件,该组件的作用类似于输入字段,但具有一些我想实现的附加功能,但是由于功能很少,我想自己实现它,而不要使用类似slatejs或draftjs的工作量很大。

我的想法是,我应该有一个受控制的contenteditable div,我可以监听插入一些文本的事件。 (例如react controlled components的一般概念)

看起来很简单。我应该侦听按键事件,并且在每个事件中,我只将相应的字符(event.key)插入到我的状态中。但是我发现在带触摸键盘的移动设备上,此值(event.key)始终为“ Unidentified”。

有时输入事件也具有确定插入值的'data'属性。但在触摸键盘中,该事件没有'data'属性。

所以我的问题是,我们如何才能以一种可在台式机和移动设备上全局运行的方式获取插入的字符? draftjs和slatejs作者如何检测插入的字符(甚至在触摸移动设备上)并更新其状态?

javascript reactjs contenteditable draftjs
1个回答
2
投票

我终于得到了答案事实证明,在react中有一个名为onBeforeInput的事件,可在contenteditable div上使用它,并具有一个名为data的属性,该属性对应于将要插入的文本(在移动设备和台式机上)。此事件是可取消的,因此您可以在其上调用preventDefault并更新您的状态。不幸的是,这个事件在任何react docs(!!)中都没有提及,我是从他们的github回购中发现这个问题的。

© www.soinside.com 2019 - 2024. All rights reserved.