ссылаясь на div из внешнего класса - PullRequest
Новая
       28

ссылаясь на div из внешнего класса

0 голосов
/ 28 февраля 2020

У меня есть div, который можно прокручивать, и я хочу сослаться на этот div вне моего класса. Например, 

const myDiv = document.getElementById('scrollDiv');

class Test extends React.Component{

  listenScrollEvent = (e) => {
    console.log("myDiv returns undefined",myDiv);
  };

  render(){
   return (
    <div id="scrollDiv" onScroll={this.listenScrollEvent.bind(this)}></div>
  )
  }
}

Здесь внутри listenScrollEvent я хочу получить доступ к myDiv, который ссылается на div с идентификатором scrollDiv. Но я получаю undefined значение в моем журнале консоли. Я могу использовать const myDiv = document.getElementById('scrollDiv'); внутри моего listenScrollEvent метода, но потом каждый раз, когда я прокручиваю, происходит обращение к div.

1 Ответ

1 голос
/ 28 февраля 2020

Вы можете получить доступ к элементу, используя ссылки в React, как это - 

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.ref = null;
  }
  listenScrollEvent = () => {
    console.log(this.myRef.getBoundingClientRect().top);
  };
  render() {
    return (
      <button
        ref={my => (this.myRef = my)}
        id="scrollDiv"
        onScroll={this.listenScrollEvent}
      >
        Click Me!
      </button>
    );
  }
}

Подробнее о ссылках - https://reactjs.org/docs/refs-and-the-dom.html

...