如何在反應js中制作2個window事件監聽器

Question

我想在按下箭頭按鈕時運行 function 如果沒有按下箭頭按鈕，我想再次運行 function。

const Gamefile = () => {
useEffect(() => {
    window.addEventListener('keydown', e => {
     if(e.key === 'ArrowDown'){
        duck();
    }
     }
   
     )
    window.addEventListener('keyup'), e => {
        if(e.key === 'ArrowDown'){
            notduck();
        }
    }
    })
}

我嘗試了這段代碼，但它是錯誤的，“預期分配或 function 調用，而是看到一個表達式 no-unused-expressions”

Answer 1

第二個addEventListener是錯誤的。 您只傳遞了一個參數，沒有傳遞監聽器 function。

const Gamefile = () => {
        useEffect(() => {
            window.addEventListener('keydown', e => {
                if (e.key === 'ArrowDown') {
                    duck();
                }
            });
            window.addEventListener('keyup', e => {
                if (e.key === 'ArrowDown') {
                    notduck();
                }
            });
        });
    };

另外，我建議您為此掛鈎添加清理 function 以在不需要時刪除偵聽器。

Answer 2

簡單的錯誤，您不小心過早關閉了支架，因此您沒有傳入 function。

const Gamefile = () => {
    useEffect(() => {
        window.addEventListener('keydown', e => {
            if (e.key === 'ArrowDown') {
                duck();
            }
        })
      
        window.addEventListener('keyup', e => {
            if (e.key === 'ArrowDown') {
                notduck();
            }
        })
    })
}

我個人還建議將鍵跟蹤切換到鈎子。 我寫了一個快速鈎子來處理這個問題，並清理事件。

const useButtons = () => {
  const [pushed, setPushed] = useState([]);

  useEffect(() => {
    const handlePress = (event) => {
      setPushed((previous) => {
        return [...new Set([...previous, event.keyCode])];
      });
    };

    const handleUnpress = (event) => {
      setPushed((previous) => {
        return previous.filter((key) => event.keyCode !== key);
      });
    };

    window.addEventListener("keydown", handlePress);
    window.addEventListener("keyup", handleUnpress);

    return () => {
      window.removeEventListener("keydown", handlePress);
      window.removeEventListener("keyup", handleUnpress);
    };
  });

  return { pushed };
};

這確實清理了用法，如下所示。

const App = () => {
  const { pushed } = useButtons();

  return (
    <>
      <h1>Pushed Buttons</h1>
      <code>{pushed.toString()}</code>
    </>
  );
};

ReactDOM.render(<App />, document.getElementById("container"));