ReactJS - ref возвращает "неопределенный" - PullRequest
Новая
       9

ReactJS - ref возвращает "неопределенный"

0 голосов
/ 24 ноября 2018

Я использую ReactJS с NextJS.Когда я пытаюсь установить ref, моя консоль возвращает мне undefined, как это возможно?Как исправить это?Я пытался прочитать некоторые предложения в Интернете, но безуспешно.

Вот мой фрагмент: 

 componentDidMount() { 
        this.myRef = React.createRef();
        window.addEventListener('scroll', this.handleScroll, { passive: true })
      }

      componentWillUnmount() {
        window.removeEventListener('scroll', this.handleScroll)
      }

      handleScroll(e) {
        e.preventDefault();
        // let offsetTop = this.myRef.current.offsetTop;

        // here I'm trying just a console.log to preview the value
        // otherwise my program will just crash
        console.log("I'm scrolling, offsetTop: ", this.myRef) 
      }

  render() {
    return (
        <div  className={style.solution_container_layout} >

            <div   ref={this.myRef} className={style.solution_item}>

Любой намек был бы великолепен, спасибо

Ответы [ 2 ]

0 голосов
/ 24 ноября 2018

Свойство current объекта, возвращаемого из createRef, задается при первом рендеринге, поэтому, если вы создадите его в componentDidMount после визуализации компонента, оно не будет установлено.

Вы также должны связать метод handleScroll, иначе this не будет тем, что вы ожидаете.

Пример 

class App extends React.Component {
  myRef = React.createRef();

  componentDidMount() {
    window.addEventListener("scroll", this.handleScroll, { passive: true });
  }

  componentWillUnmount() {
    window.removeEventListener("scroll", this.handleScroll);
  }

  handleScroll = () => {
    console.log("I'm scrolling", this.myRef.current);
  };

  render() {
    return <div ref={this.myRef} style={{ height: 1000 }}> Scroll me </div>;
  }
}

ReactDOM.render(<App />, document.getElementById("root"));
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  
<div id="root"></div>
0 голосов
/ 24 ноября 2018

Сложно сказать по коду, который вы добавили, но вы можете просто упустить этот императив в своем конструкторе: 

constructor( props ){
    super( props );
    this.handleScroll = this.handleScroll.bind(this)
}

больше информации: https://medium.freecodecamp.org/this-is-why-we-need-to-bind-event-handlers-in-class-components-in-react-f7ea1a6f93eb

...