如何更改 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})
    }
});

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

未捕获类型错误：this.setState 不是函数

Answer 1

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

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

我没有测试代码，但我希望它能给你思路

Answer 2

您需要在 componentDidMount、

的 window 上 addEventListener

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 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 代码中的状态？我写了这些代码

How do I change a state in the if codes? I've written these codes

setstate

reactjs