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

Question

我这里有一个导航组件，可以切换 class 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 事件？

Answer 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;

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

Disable onClick event when device viewport is larger than a specified size

javascript

onclick

reactjs