在React中用單詞交換標簽

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