有没有办法防止基于条件触发事件？

Question

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

例如，在下面的代码中，我将一个 onClick 事件添加到 subContainer 元素，我想防止此 onClick 在屏幕宽度小于 1200px。

有没有办法不使用侦听器来做到这一点？

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

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

这可能吗？

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

也许是这样：

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

Answer 2

可以用hook监听window尺寸，在onClick

里面根据宽度传函数

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

这是一个link到简单的useWindow hook

Answer 3

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

有没有办法防止基于条件触发事件？

Is there a way to prevent an event to be triggered based on a condition?

javascript

events

event-handling

dom-events

reactjs