Question

我的想法是我有一个带有文本区域的表格，然后是一个下拉列表中的单词列表。

在文本输入中，用户可以键入他们的句子，并使用诸如{product}之类的标签到想要将单词热插拔的位置。

我大部分时间都在工作，但是当我操纵输入的值来更改标签时，然后使用onChange函数，它将覆盖标签并带有防止它们再次被更改的单词。

例如：

  manipulateText =(text) => {
    if(text) return text.replace("{product}", this.state.type)
    else return null
  }

  onChange =(e, l) => {
    this.setState({
      [e.target.id]: l - e.target.value.length,
      [`${e.target.id}_value`]: e.target.value
    })
  }

<Input
  type="text"
  name="brand"
  id="brand"
  onChange={(e) => this.onChange(e, 35)}
  value={this.manipulateText(this.state.brand_value)}/>

有人知道我该怎么做，以便在使用标签的地方，它总是可交换的吗？

此处提供了一个有效的示例：https://codesandbox.io/s/7k264xllv1 如果将{product}用作标签，则可以对其进行更改，但是如果在更改后键入，则该标签将不再可更改

Answer 1

根据您的需要，也许替换{product}标签，旧的选定产品应该可以解决。

类似这样的东西

  manipulateText = text => {
    console.log(text, this.state);

    let result = null

    if (text) {
      result = text.replace(/{product}/g, this.state.type);

      if (this.state.old) {
        result = result.replace(new RegExp(this.state.old, "g"), this.state.type)
      }
    }
    return result
  }

工作示例：https://codesandbox.io/s/2vzppzj1y0

在React中用单词交换标签

1 个答案: