在反应路由器组件中本地监听按键/按键事件

Question

我想在本地 react-router 组件中监听 keydown 事件，如果按下某个键，它将运行 function。 但是因为事件侦听器被添加到文档 object，如果我在不同的页面上，它仍然会尝试运行 function，导致错误，因为 function 是我的组件的本地。

例如，如果我在登录页面 (domain.com/login) 中，登录页面组件加载到<main>中，并且<header>保持不变。 所以我想在我的登录组件中运行一个 function，当这个人按下 Enter 时，它将按下登录按钮/也就是运行登录 function，它在按下按钮时被调用。

Answer 1

return 关键字将在组件卸载时运行

useEffect(() => {
    function onKeyDown(e) {
        if (e.key === "Enter") {
            console.log("ENTER PRESSED")
            submit()
        }
    }
    
    document.addEventListener("keydown", onKeyDown) 

    return () => document.removeEventListener('keydown', onKeyDown);
}, [])