时间戳

首页 > 解决方案 > 如何使用条件停止 useEffect 函数？

javascript - 如何使用条件停止 useEffect 函数？

问题描述

我正在创建我的投资组合网站，其概念是创建一个人们可以与之交互的立方体。可以通过在立方体/屏幕上单击并拖动鼠标来移动立方体。但是，我希望能够通过使用 useState (true/false) 来“锁定”多维数据集。

从字面上看，如果多维数据集“isLocked”，那么我们不应该能够使用 useEffect 挂钩中的函数。到目前为止，这是我的 Cube 组件的一部分：

export default function Cube(props) {
  const [isLocked, setIsLocked] = useState(false);

  useEffect(() => {
    if (!isLocked) {
      rotateCube(document.getElementById("cube"));
    } else {
      return;
    }
  }, [isLocked]);

 // Rotate function :
  function rotateCube(cube) {
    var mouseX0 = 0,
      mouseY0 = 0,
      mouseX1 = 0,
      mouseY1 = 0;

    cube.onmousedown = dragMouseDown;

    function dragMouseDown(e) {
      e = e || window.event;
      e.preventDefault();
      mouseX0 = e.clientX;
      mouseY0 = e.clientY;
      document.onmouseup = closeDragElement;

   ...
}

标签： javascriptreactjsif-statementreact-hooksuse-effect

解决方案

可以在dragMouseDown函数中放置检查

export default function Cube(props) {
  const [isLocked, setIsLocked] = useState(false);

  // executed once on load
  useEffect(() => {
      rotateCube(document.getElementById("cube"));
  }, []);

 // Rotate function :
  function rotateCube(cube) {
    var mouseX0 = 0,
      mouseY0 = 0,
      mouseX1 = 0,
      mouseY1 = 0;

    cube.onmousedown = dragMouseDown;

    function dragMouseDown(e) {
      // here the check
      if (isLocked) { return false }
      e = e || window.event;
      e.preventDefault();
      mouseX0 = e.clientX;
      mouseY0 = e.clientY;
      document.onmouseup = closeDragElement;
   ...
   ...
   ...
}

我想知道你为什么不使用 JSX 来处理事件，例如<Cube onMouseDown={onMouseDown} />？

推荐阅读