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

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

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


POPMUISE
浏览 101回答 1
1回答

慕婉清6462132

我刚刚在你的项目上试过这个,它奏效了。用这个替换你的 handleMyPhoto 方法:handleMyPhoto = () => {&nbsp; &nbsp; const showPhoto = window.innerWidth < 600 ? false : !this.state.showPhoto;&nbsp; &nbsp; this.setState({ showPhoto&nbsp; });};这基本上检查窗口宽度是否小于 600 像素,然后将 showPhoto 状态设置为 false,否则将现有状态恢复为正常状态。
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript