React.js sticky nav не работает

Question

Я новичок в React.js. Я пытаюсь заставить левую навигацию придерживаться прокрутки. По какой-то причине приведенный ниже код вызывает следующую ошибку, когда я Свиток:

Uncaught TypeError: this.setState не является функцией

Любая помощь будет здорово! благодаря

class Sticky extends React.Component { 
constructor(props) { 
    super(props); 
    this.state = { 
     scrollingLock: false 
    }; 
} 

componentDidMount(){ 
    window.addEventListener('scroll', this.handleScroll); 
} 

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

handleScroll() { 

    if (window.scrollY > 100) { 
    console.log("should lock"); 
    this.setState({ 
     scrollingLock: true 
    }); 
    } else if (window.scrollY < 100) { 
    console.log("not locked"); 
    this.setState({ 
     scrollingLock: false 
    }); 
    } 

} 

render() { 

    return (
      <div style={{ width: "100%", position: this.state.scrollingLock ? "fixed" : "relative"}}> 
        {this.props.children} 
      </div> 
     ) 
      } 
    } 

export default Sticky; 

Answer 1

Вы должны поместить метод и экземпляр в одной функции с помощью Function.prototype.bind(). Я рекомендую вам сохранить связанную функцию как свойство, как это:

class Sticky extends React.Component { 
    constructor(props) { 
    ... 
    this._handleScroll = this.handleScroll.bind(this); 
    } 

    componentDidMount(){ 
    window.addEventListener('scroll', this._handleScroll); 
    } 

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

React component doesn't auto bind with ES6 class. Так вы вручную связать экземпляр и его методу.

Answer 2

Этот код должен работать на вас.

class Sticky extends React.Component { 
constructor(props) { 
    super(props); 
    this.state = { 
     scrollingLock: false 
    }; 
    // example how to bind object in React ES6 
    this.handleScroll = this.handleScroll.bind(this) 
} 

componentDidMount(){ 
    window.addEventListener('scroll', this.handleScroll); 
} 

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

handleScroll() { 

    if (window.scrollY > 100) { 
    console.log("should lock"); 
    this.setState({ 
     scrollingLock: true 
    }); 
    } else if (window.scrollY < 100) { 
    console.log("not locked"); 
    this.setState({ 
     scrollingLock: false 
    }); 
    } 

} 

render() { 

    return (
      <div style={{ width: "100%", position: this.state.scrollingLock ? "fixed" : "relative"}}> 
        {this.props.children} 
      </div> 
     ) 
      } 
    } 

React.render(<Sticky/> , document.body) 

Также here хорошая статья вокруг связывания в ES6 Реагировать код.

Я надеюсь, что это вам поможет.

Благодаря

Answer 3

У меня была аналогичная проблема, я использовал react-sticky, которые вы можете найти here. Его очень просто установить, и если вы хотите увидеть какой-либо код для справки, вы можете увидеть, что here. Конечно, это добавляет еще одну зависимость, но мне понадобилось 10 минут, чтобы запустить ее. Удачи!