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，否则将现有状态恢复为正常状态。