Javascript 文本输入中的React本机用户标记

我似乎无法正确理解如何在文本输入中设置可编辑的格式化用户标记

例如：

const stateString = "{{ userId:1 }} is feeling great.";

为了显示格式化的用户标签，我获取该值，通过一个函数运行它，它输出

“John感觉很棒。”

，其中

John

有一个可见的背景色

我的问题是，在我的

TextInput

的下一个

onChange

触发器上，

e.nativeEvent.text

是

“John感觉很棒。”

没有任何格式

如果我直接将其反馈给

TextInput

组件，我将丢失格式，因为它不再具有

{{userId:1}

我唯一的选择是使用

stateString

并将其与

e.nativeEvent.text

进行比较，查看更改的内容，然后手动重新插入用户标记

问题是它很复杂（更改可以是添加的字符、删除的字符或删除的多个字符），而且您可以让来自

{{userId:1}}的
johnis with John
与{{userId:2}}

一起使用。两个不同的人，同名

问题是我需要

{{userId:1}}

发送到服务器，以便它知道注释中提到了哪些用户

---

任何想法都将不胜感激

您必须同时跟踪编码字符串和格式化字符串

或者格式化字符串和编码映射。我过去两次都做过，但基本上策略是：

tokens: [{type:mention, userId:1, position: 0, endPosition:4}]
// or
rich: "{{ user:1 }} is so hawt"
// or
rich: "yourProtocol://yourDomain/user?id=1&username=John is so hawt"

slug: "John is so hawt"

现在

slug

可以从

rich

派生出来。但是，作为一个用户类型，很难实时维护这两者。 您必须说明：

删去提及的内容

编辑提及的文本

删除许多字符，包括部分提及

删除许多提及

可能更多