输入框内的值没有改变答案

【问题标题】：Value inside inputbox is not changing输入框内的值没有改变
【发布时间】：2021-08-11 02:51:32
【问题描述】：

我想做什么：如果输入框检测到关键字“团队：”，它应该显示一个 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 />) })
  }

这是我的应用组件

<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

如果我这样做了 this.setState({value: 'hi'}) 它可以工作，但替换不起作用

编辑：还请告诉如何替换几个关键字？

感谢任何 cmets！

【问题讨论】：

澄清一下，你有一个<input type="text"/> 文本框，你想在里面显示一个SVG？不幸的是，像这样的文本框只能包含文本，不能包含图像。您是否对用 SVG 替换整个文本框感到满意？
@HanSeoul-哦，有什么替代品？我不想用 SVG 替换整个文本框。 StackOverflow 也有这个输入框。当您要发布 qs 时，您必须选择标签。我想要一个这样的输入框

标签： javascript reactjs forms input tailwind-css

【解决方案1】：

StackOverflow 的诀窍在于它看起来 文本框内有标签，但实际上唯一的文本框是您可以输入的部分，而是一个包含标签和实际标签的框文本框的样式看起来像一个文本框。

这是一个自己构建这样一个东西的教程：https://jerrylowm.medium.com/build-a-tags-input-react-component-from-scratch-1524f02acb9a

还有一些 React 库已经这样做了：https://betterstack.dev/projects/react-tag-input/

【讨论】：

非常感谢，还有一个问题 - 在你发送的那个 React lib 中，我可以更改输入 ':' 所以如果有人添加一个冒号，它会成为一个标签，我可以限制它的长度吗如果我按团队选择like：那么它应该在'：'后面制作一个带有4个字母的标签？
@HarshitGupta 它的文档不允许这样做，但是如果你按照教程自己构建一个，你可以让它做任何你想做的事情:)

【解决方案2】：

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

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

然后使用“map”函数并显示适当的组件——打印字符串值或 TeamSearchIcon。

【讨论】：

但是如果我这样做 this.setState({value: this.state.value}) 它会显示一个空白输入框，它应该显示相同的值