Reactjs 如何更改if代码中的状态？I'；我写了这些代码

我怎么能用那种东西

$(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})
    }
});

$（窗口）。调整大小（函数（）{
如果（$（窗口）.width（）<768）{
this.setState（{slidesToShow:1}）
}else if（$（窗口）.width（）<992）{
this.setState（{slidesToShow:2}）
}否则{
this.setState（{slidesToShow:3}）
}
});

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

---

未捕获类型错误：this.setState不是react中的函数。您应该在渲染方法中这样做，并且需要使用另一个if-else模型，在“？”之后，您应该使用true-state函数，在“：”之后，您应该编写false函数

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

Render（）{
返回(
{windows.width（）<700？
“如果是真的，做点什么”
: 
“做错了事”
}
);
}

---

我不测试代码，但我希望它能给你一个想法，你需要在

componentDidMount

的窗口中

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

---

您可以自己添加和删除

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

从“React”导入React；
从“react dom”导入react dom；
从“react resize detector”导入ReactResizeDetector；
导入“/styles.css”；
类App扩展了React.PureComponent{
状态={
幻灯片放映：1
}
render（）{
返回(
{this.state.slidesToShow}
);
}
onResize=（宽度）=>{
如果（宽度<768）{
this.setState（{slidesToShow:1}）；
}否则，如果（宽度<992）{
this.setState（{slidesToShow:2}）；
}否则{
this.setState（{slidesToShow:3}）；
}
}
}
const rootElement=document.getElementById（“根”）；
render（，rootElement）；

---

希望有帮助

重复同样的答案有什么意义？你的答案有什么新的/变化？对不起，我没有看到你的答案。没关系。没必要道歉。这是常有的事。如果愿意，您可以改进您的答案。感谢您的评论，我已经更新了我的答案。出现错误的原因是您没有将

resize

函数绑定到类的实例。使用

resize=（）=>{}

arrow函数或bind-in构造函数来正确绑定此“上下文”。您好，mohsen，请检查我的解决方案，并告诉我这是否有帮助。感谢您的回答，但我想在它第一次按您所说的方式运行时更改状态值。只有在我调整页面大小时，它才会更改状态。@mohsenzarei，在这种情况下，您可以直接在

componentDidMount

中调用

this.resize（）

，比如，

componentDidMount（）{this.resize（）；window.addEventListener（'resize'，this.resize）；}

@mohsenzarei，查看演示，我已经更新了。非常感谢您一切都很好

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