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

【问题标题】：Disable onClick event when device viewport is larger than a specified size [duplicate]当设备视口大于指定大小时禁用onClick事件[重复]
【发布时间】：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 并在视口大于指定大小时返回。

标签： javascript reactjs onclick

【解决方案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;

【讨论】：