Question

我是React.js的新手。我试图让左侧导航系统坚持滚动。出于某种原因，下面的代码在滚动时导致以下错误：

未捕获的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

此代码应该适合您。

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 React Code中绑定的好文章。

我希望它会对你有所帮助。

由于

Answer 2

您应该使用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 3

我遇到了类似的问题，我使用了react-sticky，您可以找到here。它的安装非常简单，如果您想查看一些实时代码以供参考，您可以看到here。当然，这会增加另一个依赖，但它也花了我10分钟让它运行。祝你好运！

React.js粘性导航无法正常工作

3 个答案: