Question

从今天早上开始，我一直被困在这个位置上，但我仍然不知道哪里出了问题。我想突出显示textarea输入类型内的文本。我知道这是不可能的，但是我找到了一个聪明的解决方案，以欺骗观众以为是。 Here是文章的链接，Here是项目的代码笔的链接。

我一直在尝试使用react和普通的javascript重新创建相同的内容，但是div的classClassName高亮的scrollTop属性不起作用。如果有人可以帮助我调试我做错了的事情，那太好了！

class CodeTextArea extends React.Component {
  constructor(props){
    super(props);
    this.state = {scrollTop: 0, 
                  scrollLeft: 0
                 };
    this.setScroll = this.setScroll.bind(this);
  }
  setScroll(top,left){
    this.setState({scrollTop: top, scrollLeft: left});
  }
  render(){
    return(
      <div class="container">
  <div class="backdrop">
    <Highlight scrollTop={this.state.scrollTop} scrollLeft={this.state.scrollLeft}/>
  </div>
  <Textarea setScrollTop={this.setScroll}/>
</div>
    );
  }
}
class Highlight extends React.Component {
    constructor(props){
    super(props);
    this.divRef = React.createRef();
  }
  componentDidUpdate(prevProps){
    if (this.props.scrollTop !== prevProps.scrollTop) {
      /*console.log(this.divRef.current);
      console.log(this.props.scrollTop);
      console.log(this.props.scrollLeft);*/
      this.divRef.current.scrollTop = this.props.scrollTop;
    }

  }
  render(){       
    return (
      <div class="highlights" ref={this.divRef}><mark>This</mark> demo shows how to highlight bits of text within a <mark>textarea</mark>. Alright, that's a lie. You can't actually render markup inside a textarea. However, you can fake it by carefully positioning a div behind the textarea and adding your highlight markup there. JavaScript takes care of syncing the content and scroll position from the textarea to the div, so everything lines up nicely. Hit the toggle button to peek behind the curtain. And feel free to edit this text. All capitalized words will be highlighted.
      </div>
    );
  }
}
class TogglePerspective extends React.Component {
  constructor(props){
    super(props);
    this.clickHandler = this.clickHandler.bind(this);
    this.buttonRef = React.createRef();
  }
  clickHandler(){

  }
  render(){
    return (
      <button onClick={this.clickHandler} ref={this.buttonRef}>Toggle Perspective</button>
    );
  }
}
class Textarea extends React.Component {
  constructor(props){
    super(props);
    this.handleScroll = this.handleScroll.bind(this);
    this.handleChange = this.handleChange.bind(this);
    this.applyHighlights = this.applyHighlights.bind(this);
    this.textareaRef = React.createRef();
    this.state = {value: 'This demo shows how to highlight bits of text within a textarea. Alright, that\'s a lie. You can\'t actually render markup inside a textarea. However, you can fake it by carefully positioning a div behind the textarea and adding your highlight markup there. JavaScript takes care of syncing the content and scroll position from the textarea to the div, so everything lines up nicely. Hit the toggle button to peek behind the curtain. And feel free to edit this text. All capitalized words will be highlighted.'};
  }

  applyHighlights(text){
    return text
        .replace(/\n$/g, '\n\n')
        .replace(/[A-Z].*?\b/g, '<mark>$&</mark>');
  }

  handleScroll(){
    let scrollTop = this.textareaRef.current.scrollTop;
    let scrollLeft = this.textareaRef.current.scrollLeft;
    this.props.setScrollTop(scrollTop,scrollLeft);
  }

  handleChange(event){
    let textareaValue = event.targrt.value;
    this.setState({value: textareaValue});
    let highlightedText = this.applyHighlights(textareaValue);
  }

  render(){
    return (
      <textarea ref={this.textareaRef} value={this.state.value} onChange={this.handleChange} onScroll={this.handleScroll}></textarea>
    );
  }
}
class Editor extends React.Component {
  render(){
    return (
     <div>
    <CodeTextArea />
<TogglePerspective />
</div>
    );
  }
}

ReactDOM.render(
 <Editor />,
 document.getElementById('root')
);

Here是我的娱乐之笔。请告诉我为什么高亮显示类div scrollTop属性不起作用。除非我真的感到沮丧，否则我通常不会在这里发布冗长的代码，因此我们将不胜感激。

Answer 1

似乎应该在scrollTop上设置div.highlights的{{1}}属性。

将div.backdrop移到div.backdrop组件中，并将ref放在该元素上：

Highlight

React：在特定情况下，在Div上设置scrollTop无效

1 个答案: