React：在 contenteditable div 中创建交互式组件
React: Creating interactive components in contenteditable div
我的目标是创建一个输入 div 来检查是否为数值提供了货币标签。内容可编辑的 div 应该定位数值并最好将它们转换为 individual 组件，每个组件都可以显示一个选项工具提示，供用户为每个值分配一个货币值。
这是我目前正在做的事情：https://codesandbox.io/s/keen-silence-4uizr
当前已知问题：
- 使用当前的
react-contenteditable 组件，阻止我渲染除纯 HTML 之外的任何内容，但是如果我使用带有属性 contenteditable 的普通 div，插入符号 f *** 就在附近，总体而言，使用 react-contenteditable 组件，回调和用户体验更好。
- 由于显示选项部分时状态发生变化，所有添加到当前选定元素的自定义 JS 都消失了，而且似乎无法以任何方式保留它。
现实世界的例子
如果你去 Facebook 并开始写一个新的状态更新，然后你开始写一个朋友的名字，它会显示一个选项列表并将这些选项分配给你当前正在写的元素。知道如何做到这一点，我相信应该可以很容易地对数值和货币价值做同样的事情。
基本上我只是害怕（也希望...）我把这里的事情复杂化了，有人可以告诉我：
Dude! this is like the easiest thing ever! Just do like this!
您可以使用 facebook 的 draftjs.org, where specifically this example seems very similar to what you are looking for: https://github.com/facebook/draft-js/blob/master/examples/draft-0-10-0/tweet/tweet.html
我的目标是创建一个输入 div 来检查是否为数值提供了货币标签。内容可编辑的 div 应该定位数值并最好将它们转换为 individual 组件，每个组件都可以显示一个选项工具提示，供用户为每个值分配一个货币值。
这是我目前正在做的事情：https://codesandbox.io/s/keen-silence-4uizr
当前已知问题：
- 使用当前的
react-contenteditable组件，阻止我渲染除纯 HTML 之外的任何内容，但是如果我使用带有属性contenteditable的普通 div，插入符号 f *** 就在附近，总体而言，使用react-contenteditable组件，回调和用户体验更好。 - 由于显示选项部分时状态发生变化，所有添加到当前选定元素的自定义 JS 都消失了，而且似乎无法以任何方式保留它。
现实世界的例子
如果你去 Facebook 并开始写一个新的状态更新，然后你开始写一个朋友的名字，它会显示一个选项列表并将这些选项分配给你当前正在写的元素。知道如何做到这一点，我相信应该可以很容易地对数值和货币价值做同样的事情。
基本上我只是害怕（也希望...）我把这里的事情复杂化了，有人可以告诉我：
Dude! this is like the easiest thing ever! Just do like this!
您可以使用 facebook 的 draftjs.org, where specifically this example seems very similar to what you are looking for: https://github.com/facebook/draft-js/blob/master/examples/draft-0-10-0/tweet/tweet.html