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不是函数

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})
    }
  }

Demo

注意：请确保在卸载组件时删除事件侦听器，

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

Answer 2

在react中，您应该在这样的渲染方法中执行此操作，并且需要在“？”之后使用另一个if-else模型。您应该使用真实状态函数，并在'：'之后编写错误函数

Render(){
  return(
    <div>
      {windows.width() < 700 ?
        "Do something if true" 
        : 
        "do something if false " 
      }
   </div> 
  );
}

我不测试代码，但我希望它能给您带来灵感

Answer 3

您可以自己添加或删除resize eventListener或使用react-resize-detector库。

1）提供更大的灵活性。可以用作HOC，组件或渲染道具图案。

2）它还支持您必须支持的刷新模式（节流和去抖动）和刷新率。

import React from "react";
import ReactDOM from "react-dom";
import ReactResizeDetector from 'react-resize-detector';
import "./styles.css";

class App extends React.PureComponent {
  state = {
    slidesToShow: 1
  }
  render() {
    return (
      <div>
        <div>{this.state.slidesToShow}</div>
        <ReactResizeDetector handleWidth handleHeight onResize={this.onResize} />
      </div>
    );
  }

  onResize = (width) => {
    if (width < 768) {
      this.setState({ slidesToShow: 1 });
    } else if (width < 992) {
      this.setState({ slidesToShow: 2 });
    } else {
      this.setState({ slidesToShow: 3 });
    }
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App/>, rootElement);

希望有帮助！

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

3 个答案: