反应 - 浏览器缩小时禁用功能

Question

例如，当浏览器窗口缩小到600px以下时，我正在尝试禁用onMouseEnter/onMouseLeave事件侦听器。我的问题与类似的查询有关当窗口大小低于 770px 时禁用整个函数。但是，我从未使用过jquery，所以我想知道有没有办法在不使用jquery的情况下在React中实现同样的事情。

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

我真的很感激任何建议。谢谢

Answer 1

我刚刚在您的项目上尝试了这个，它奏效了。

将句柄我的照片方法替换为：

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

这基本上检查窗口宽度是否小于 600px，然后将 showPhoto 状态设置为 false，否则它会正常恢复现有状态。