React - 浏览器缩小时禁用功能

Posted 2023-05-07

【中文标题】React - 浏览器缩小时禁用功能

【英文标题】：React - Disable function when browser shrinks

【发布时间】：2020-10-22 09:10:16

【问题描述】：

例如，当浏览器窗口缩小到 600 像素以下时，我正在尝试禁用 onMouseEnter / onMouseLeave 事件侦听器。我的问题涉及到一个类似的查询 Disable a whole function when window size is below 770px。但是，我从来没有使用过 jquery，所以我想知道有没有一种方法可以在不使用 jquery 的情况下在 React 中实现相同的功能。

这是我正在处理的示例https://codesandbox.io/s/jovial-rubin-vh2ft?file=/src/App.js:482-494

我非常感谢任何建议。谢谢

【参考方案1】：

我刚刚在你的项目上试过这个，它成功了。

用这个替换你的 handleMyPhoto 方法：

handleMyPhoto = () => 
    const showPhoto = window.innerWidth < 600 ? false : !this.state.showPhoto;
    this.setState( showPhoto  );
;

这主要是检查窗口宽度是否小于 600 像素，然后将 showPhoto 状态设置为 false，否则将现有状态恢复为正常状态。