javascript - React：在 contenteditable div 中创建交互式组件

Question

我的目标是创建一个输入 div 来检查数值是否提供了货币标签。内容可编辑的 div 应该定位数值，并最好将它们转换为单独的组件，每个组件都可以显示一个选项工具提示，供用户为每个值分配货币值。

这是我目前正在做的事情：https ://codesandbox.io/s/keen-silence-4uizr

目前已知问题：

• 使用当前react-contenteditable组件会阻止我渲染纯 HTML 以外的任何内容，但如果我使用带有属性的普通 div contenteditable，插入符号会在周围出现，总体而言，使用该 react-contenteditable组件时回调和 UX 会更好。
• 由于显示选项部分时的状态更改，所有添加到目标当前选定元素的自定义 JS 都消失了，并且似乎无法以任何方式持续存在。

现实世界的例子

如果你去 Facebook 并开始写一个新的状态更新，然后你开始写出朋友的名字，它会显示一个选项列表并将这些分配给你当前正在写的元素。知道如何做到这一点，应该可以很容易地对我相信的数值和货币价值做同样的事情。

---

基本上我只是害怕（也希望......）我在这里把事情复杂化了，有人可以告诉我：

老兄！这就像有史以来最简单的事情！就这样吧！

标签： javascriptreactjscontenteditable

Answer 1

您可以使用 facebook 的draftjs.org，具体而言，此示例与您要查找的内容非常相似：https ://github.com/facebook/draft-js/blob/master/examples/draft-0-10-0/推文/tweet.html