如何仅对具有 id 的组件使用 onmousemove

如何解决如何仅对具有 id 的组件使用 onmousemove

我正在尝试用 reactJS 做一个锁屏。我的空闲是用 setTimeout 检查用户冻结时间的组件，当超时锁定屏幕并覆盖所有屏幕时，用户将再次登录工作。

每个想法都可以，我想通过组件布局中的控制事件来提高安全性（此组件始终显示在屏幕中，当锁定屏幕覆盖它时会出现一种情况）。我认为如果有人尝试通过 devtools 删除锁定屏幕，他必须制作像 movemouse 或 presskey 这样的事件，所以我将此代码放在我的布局中。

useEffect(() => {
    if (auth.locked) {
        document.getElementById("layout").onmousemove = dispatch(logout());
        document.getElementById("layout").onkeypress = dispatch(logout());
    }
},[auth]);

但它无法正常工作，当锁定屏幕显示此代码三角注销时，用户将丢失用户的当前数据。 这是 2 个组件的位置。

    <Fragment>
        <Container fluid id="layout">
        <LockScreen />
    </Fragment>