有没有办法防止根据条件触发事件？

如何解决有没有办法防止根据条件触发事件？

我正在构建一个 ReactJS 应用程序，我有一个在单击后调用的函数，但是我希望仅当屏幕宽度大于 1200 像素时才触发此单击事件。

例如，在下面的代码中，我在 onClick 元素中添加了一个 subContainer 事件，如果屏幕宽度较小，我想防止触发此 onClick大于 1200 像素。

有没有办法在不使用监听器的情况下做到这一点？

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

应该是这样的：<div screenWidth > 1200 ? onClick="..." : null>Test</div>。当然，这行不通。

这可能吗？

附言记住，我使用的是 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>

解决方法

也许是这样：

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。

Codesandbox

,

可以使用hook监听窗口大小并根据onClick里面的宽度传递函数

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

这是一个简单的链接 useWindow hook

,

根据 this post 将属性设置为 false 会导致反应将其从 HTML 中省略，这可能会导致事件从不被调用开始，因此也许使用 onClick={window.screen.width > 1200 ? function() : false} 是最好的方法。