reactjs - 如何更改 if 代码中的状态？我写了这些代码

Question

我怎样才能使用这样的东西

$(window).resize(function() {
    if ($(window).width() < 768) {
        this.setState({slidesToShow:1})
    }else if ($(window).width() < 992) {
        this.setState({slidesToShow:2})
    }else  {
        this.setState({slidesToShow:3})
    }
});

但是当我调整页面大小时，状态不会改变，当它改变时，它会

未捕获的 TypeError：this.setState 不是函数

标签： reactjssetstate

Answer 1

你需要addEventListener在窗口中componentDidMount，

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

您的调整大小功能应该是，

resize = () => {
    console.log(window.innerWidth);
    if (window.innerWidth < 768) {
        this.setState({slidesToShow:1})
    }else if (window.innerWidth < 992) {
        this.setState({slidesToShow:2})
    }else  {
        this.setState({slidesToShow:3})
    }
  }

演示

注意：确保在组件卸载时移除事件监听器，

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