Обмен тегами со словами в 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