Javascript inputbox中的值未更改

我想做的是：如果输入框检测到关键字“team:”它应该显示一个svg

class App extends React.Component {
  state = {
    isSidebar: false,
  }
  constructor(props) {
    super(props);
    this.state = {value: ''}
  }  
change = () => {
    this.setState({ value: this.state.value.replace("team:", <TeamSearchIcon />) })
  }

类应用程序扩展了React.Component{
状态={
伊西德巴：错，
}
建造师（道具）{
超级（道具）；
this.state={value:''}
}  
更改=（）=>{
this.setState（{value:this.state.value.replace（“团队：”，）}）
}

这是我的应用程序组件

<input class="w-full rounded p-2 pl-5 pr-5 focus:outline-none text-lg" type="text" placeholder="search..." value={this.state.value} onChange={this.change}>
</input>

这是我的输入框 svg是否作为组件导入

<input class="w-full rounded p-2 pl-5 pr-5 focus:outline-none text-lg" type="text" placeholder="search..." value={this.state.value} onChange={this.change}>
</input>

如果我这样做。setState（{value:'hi'}）可以工作，但替换不起作用

编辑：请同时说明如何替换几个关键字

欢迎发表任何评论！

使用“替换”，您实际上是在尝试将JSX组件TeamSearchIcon作为字符串变量的一部分。但是，它不是字符串变量

一种解决方案是获取字符串变量，并将其拆分为字符串数组，如const stringArray=this.state.value.split（'team:'）

---

然后使用“地图”函数并显示相应的组件——可以打印字符串值，也可以显示TeamSearchIcon。

StackOverflow的诀窍是，它看起来像是文本框中有标记，但实际上唯一的文本框是您可以键入的部分，相反，包含标记和实际文本框的框被设置为外观就像一个文本框

这是一个自己构建这样一个东西的教程：

---

还有一些React库已经这样做了：

但是如果我这样做的话。setState（{value:this.state.value}）它显示了一个空白的输入框，应该在其中显示相同的值要澄清的是，您有一个

文本框，并且您试图在其中显示SVG？不幸的是，这样的文本框只能包含文本，不能包含图像。您是否满意用SVG替换整个文本框？@Hanseul哦，还有什么替代方法吗？我不知道nt将整个文本框替换为SVG。StackOverflow也有这个输入框。当你要发布qs时，你必须选择标记。我想要这样的输入框非常感谢，还有一个问题-在你发送的React lib中，我是否可以将输入改为“：”，所以如果有人添加冒号，它会生成一个标记，并且我可以限制它的长度，就像我预输入一样ss团队：那么它应该在“：”？@HarshitGupta后面做一个4个字母的标记，它的文档不允许这样做，但是如果你按照教程自己构建一个，你可以让它做任何你想做的事情：）