ReactJS - 制作包含标签和自由文本作为模板的文本输入

rza*_*rza 2 tags variables text input reactjs

我正在研究一种简单的方法来制作自由文本输入,该输入还可以包含多个可替换标签来创建模板。正如这张图片的例子

在那张照片中,女巫玩家(标签)进球的信息将被存储。稍后我会重用该模板并用值替换标签。比如:伊涅斯塔的进球、里瓦尔多的进球……

我找不到可以完成这项工作的库。我为解决该问题所做的几次尝试导致了极其复杂的输入,需要重新定义选择(onClick、onKeydown、onSelect、维护当前选择),因为用户无法手动编辑标签(它们是通过单击按钮触发的)。

有人已经必须处理这种输入了吗?


编辑:由于我的问题似乎不清楚,我将添加一些细节。事实上,输入应该像自由文本输入一样工作,但也应该允许添加由外部触发器(onClick 按钮)提供的标签/芯片

示例:我将在 [day] 进行 [activity]

首先,我输入“我将制作”,然后单击“活动”按钮,该按钮将向输入添加“活动”标签/芯片。我继续输入“on”,最后单击“day”按钮添加标签“day”

然后我将其存储为模板,并通过替换标签在多个场景中重用它。喜欢:

  • 星期一我会做三明治

  • 星期五我会做运动

rza*_*rza 8

如果其他人也有同样的问题。我终于找到了正确的 lib Tagify。它有混合模式(文本+标签)