Metin Alanı ReactJS ile Div kaydırma yapın

oy
0

Ben uygulamak çalışıyorum bu çözümü benim web uygulaması için bir metin alanına metin vurgulama için. Bu jQuery dayanır, ancak bir ReactJS app inşa ediyorum, bu yüzden gibi-için-benzeri bir kopyasını yapamaz.

Ben orada paketlerin bazı baktım ama (iyi ve kötü) kelimelerinin iki kategori vurgulamak gerekir olarak oldukça, benim gereksinimleri karşılamayan ve ben bulabilirsiniz tüm paketler tek kategorinin vurgulamak için izin verecek .

Bir kullanıcı doldurur zaman textareabileşeni, bir API sonra metni analiz eder ve en iyi 10 kelime ve 10 kötü kelime döndürür. Ben metin alanı kaydırıldığında ancak, alamayan, benim vurgulama çalışır noktaya var <div>bunun arkasında aynı anda kaydırmak için.

Şu anda manipüle etmeye çalışıyorum bileşeni aşağıdaki gibi görünür:

<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>

Şu anda duruma kaydırma konumunu geçen ve bir şekilde div bileşenine o geçmek istiyorum ediyorum.

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 farkındayım dangourouslySetInnerHTMLkesinlikle iyi uygulama değildir. Yani bu sorunun odak değil, ama daha iyi bir şekilde bu işi yapmak konusunda fikir bekleriz.

Oluştur 04/12/2018 saat 09:43
kaynak kullanıcı
Diğer dillerde...                            

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more