Question

我正在尝试实现this solution以突出显示Web应用程序的文本区域中的文本。这依赖于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绝对不是最佳实践。这不是这个问题的重点，但是欢迎提出有关如何更好地进行这项工作的想法。

使用Textarea ReactJS使Div滚动

0 个答案: