Сделайте прокрутку Div с помощью Textarea ReactJS - PullRequest
Новая
       41

Сделайте прокрутку Div с помощью Textarea ReactJS

0 голосов
/ 04 декабря 2018

Я пытаюсь реализовать это решение для выделения текста в текстовой области для моего веб-приложения.Это зависит от Jquery, но я создаю приложение ReactJS, поэтому не могу сделать копию, похожую на аналогичную.

Я посмотрел некоторые пакеты там, но не совсем соответствую моим требованиям, так как мне нужно выделить две категории слов (хороший и плохой), и все пакеты, которые я могу найти, будут толькоПозволяет выделить одну категорию.

Когда пользователь заполняет компонент textarea, API анализирует текст и возвращает 10 лучших слов и 10 худших слов.Я дошел до того, что мое выделение работает, однако, когда текстовая область прокручивается, я не могу заставить одновременно прокручивать <div> за ней.

Компонент, которым я пытаюсь манипулироватьв настоящее время выглядит так: 

<div className="textarea-container">
    <div className="backdrop" ref={this.hightlightsRef} scrollTop ={this.state.scrollTop} >
        <div className="highlights" dangerouslySetInnerHTML={this.highlightText()} ></div>
     </div>
     <textarea
         className="form-control text-area"
         name="textArea"
         id="textAreaInput"
         value = {this.state.textArea}
         onChange={this.handleInput}
         onScroll={this.handleScroll}
     >
     </textarea>
 </div>

В настоящее время я передаю позицию прокрутки в состояние и хочу как-то передать ее компоненту div. 

highlightText = () => {
  if (this.state.bestWords.length && this.state.worstWords.length) {
    let bestWordsRegEx = new RegExp('\\b(' + this.state.bestWords.join("|") + ')\\S*\\b','gi')
    let worstWordsRegEx = new RegExp('\\b(' + this.state.worstWords.join("|") + ')\\S*\\b','gi')

    let text = this.state.textArea
      .replace(/\n$/g, '\n\n')
      .replace(bestWordsRegEx, w => {return `<mark class="good">${w}</mark>`})
      .replace(worstWordsRegEx, w => {return `<mark class="bad">${w}</mark>`});

    return {__html: text};
  }
};

handleInput = e => {
  this.setState({jobDescription: e.target.value})
}

handleScroll = e => {
  this.setState({scrollTop: e.target.scrollTop})

}

PSЯ знаю, что dangourouslySetInnerHTML определенно не лучшая практика.Это не предмет этого вопроса, но хотелось бы получить идеи о том, как сделать эту работу лучше.

...