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

Question

例如，当浏览器窗口缩小到 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

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

Answer 1

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

用这个替换你的 handleMyPhoto 方法：

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

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