在文本输入中反应本机用户标签

Question

我似乎无法正确弄清楚如何在文本输入中设置可编辑的格式化用户标签。

例如：

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

为了显示格式化的用户标签，我获取该值，通过一个函数运行它，它输出"John is feeling great."，其中John 具有可见的背景颜色。

我的问题是，在我的TextInput 的下一个onChange 触发器上，e.nativeEvent.text 是"John is feeling great."，没有任何格式。

如果我直接将其反馈给TextInput 组件，我将丢失格式，因为它将不再具有{{ userId: 1 }}。

我唯一的选择是将stateString 与e.nativeEvent.text 进行比较，看看有什么变化，然后手动重新注入用户标签。

问题在于它很复杂（更改可以是添加的字符、删除的字符或删除的多个字符），而且您可以让John is with John 来自{{ userId:1 }} is with {{ userId:2 }}。两个不同的人，同一个名字。

问题是我需要{{ userId:1 }} 发送到服务器，所以它知道评论中提到了哪些用户。

任何想法都将不胜感激！

Answer 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。但是，当用户键入时，很难实时维护两者。 您必须考虑：

1. 删除提及。
2. 编辑提及中的文字。
3. 删除许多字符，包括部分提及。
4. 删除许多提及。
5. 可能更多...