当设备视口大于指定大小时禁用onClick事件[重复]

Posted 2023-03-06

【中文标题】当设备视口大于指定大小时禁用onClick事件[重复]

【英文标题】：Disable onClick event when device viewport is larger than a specified size [duplicate]

【发布时间】：2021-04-15 04:22:08

【问题描述】：

我在这里有一个导航组件，它可以切换一个 onClick 类

import React from "react";

//COMPONENTS

import Navlinks from './Navlinks';

class Navigation extends React.Component 
  constructor(props) 
    super(props);
    this.state = addClass: false
  
  toggle() 
    setTimeout(() => 
      this.setState(addClass: !this.state.addClass);
    , 200);
  
  render() 
    let navClass = ["nav"];
    if(this.state.addClass) 
      navClass.push('open');
    
    return(
        <div className=navClass.join(' ') onClick=this.toggle.bind(this)>
          <div className="icon"></div>
          <Navlinks onClick=this.props.onClick/>
        </div>       
    );
  

export default Navigation;

当设备视口大于特定大小时，我是否可以通过某种方式禁用 onClick 事件？

【问题讨论】：

一个简单的方法是在 onClick 处理程序中 check the viewport size 并在视口大于指定大小时返回。

【参考方案1】：

这有帮助吗：我正在使用window.innerWidth 检查视口的宽度并根据条件相应地设置onClick。

import React from "react";
import "./styles.css";

class App extends React.Component 
  constructor(props) 
    super(props);
    this.state =  addClass: false, vw: window.innerWidth ;
  
  toggle() 
    console.log("Toggle Method");
  

  notToggle() 
    console.log("Not Toggling");
  
  render() 
    return (
      <div
        onClick=
          this.vw > 800 ? this.toggle.bind(this) : this.notToggle.bind(this)
        
      >
        <div className="icon">Hellow Hellow</div>
      </div>
    );
  


export default App;