是否有方法防止基于某个条件触发事件？

Question

我正在构建一个ReactJS应用程序，我有一个在点击后调用的函数，但是我希望只有当屏幕宽度大于1200px时才会触发这个点击事件。

例如，在下面的代码中，我在子容器元素中添加了一个onClick事件，我想防止在屏幕宽度小于1200px时触发此onClick。

有没有一种不使用监听器的方法可以做到这一点？

我知道我可以使用一个监听器并设置一个条件来确定是否会监听该事件；我还知道我可以在函数中设置条件，并阻止执行逻辑；我还可以创建两个不同的JSX元素（一个没有事件），并根据我的条件呈现一个或另一个。但是我想要的是保持元素上的onClick（不带addEventListener）并防止它被触发

可能是这样的：

这可能吗？

P. S.记住，我正在使用React，这段代码只是一个例子。

const test = () => {
  console.log('Test')
}

.subContainer {
  width: 100px;
  height: 20px;
  background-color: red;
  color: white;
  text-align: center;
  cursor: pointer;
}

<div class="container">
  <div class="subContainer" onClick="test()">Test<div>
</div>




Answer 1

根据这篇文章，将属性设置为false原因会做出反应，从超文本标记语言中省略它，这可能会导致事件从一开始就没有被调用，所以也许使用onClark={window.screen.width

Answer 2

您可以使用钩子来监听窗口大小，并根据onClick内的宽度传递函数

function App() {
  const size = useWindowSize();
  return (
    <div class="container">
      <div class="subContainer" onClick={size.width > 1200 ? test : null}>
        Test
      </div>
    </div>
  );
}

这里是一个链接到简单使用窗口钩子

Answer 3

也许是这样：

import "./styles.css";

export default function App() {
  console.log(window.screen.width);
  let myCondition = window.screen.width > 1200;
  console.log(myCondition);
  const clickThis = () => {
    console.log("hello");
  };

  return (
    <div className="App">
      <button
        onClick={ myCondition ? clickThis : null}
      >
        Hello CodeSandbox
      </button>
    </div>
  );
}

而且，很明显它是window.screen.width，而不是window.screenWidth。

代码框