时间戳

首页 > 解决方案 > 如何使用 React hook useEffect 添加事件处理程序取决于状态？

reactjs - 如何使用 React hook useEffect 添加事件处理程序取决于状态？

问题描述

我有一个授权组件，包括另一个组件 - 用户名、密码等字段。我尝试创建反应挂钩 useeffect，我想在“X”keyDown 事件上添加订阅。在这个事件中，我想执行 Authorize() 函数，该函数位于组件主体（不是钩子主体）中，并且取决于授权组件状态。

所以，我发现的唯一解决方案是：

  useEffect(() => {
    const handleKeyDown = (event) => {
      event.key === 'X' && defineIsAuthorizationAvailable() && authorize()
    }
    window.addEventListener('keydown', handleKeyDown)
    return () => window.removeEventListener('keydown', handleKeyDown)
  })

但我认为它不正确，因为这种订阅/取消订阅会在每次用户状态更改时执行。请帮忙。

标签： reactjsevent-handlingaddeventlistenerreact-hooksuse-effect

解决方案

所以，您想useEffect根据布尔状态值运行某些函数，对吗？如果是这样，您可以在useEffect钩子中使用条件并在某些状态更改时重新渲染。例如，像这样：

 useEffect(() => {
if(authorizeBoolean) {
const handleKeyDown = (event) => {
      event.key === 'X' && defineIsAuthorizationAvailable() && authorize()
    }
    window.addEventListener('keydown', handleKeyDown)
    return () => window.removeEventListener('keydown', handleKeyDown)
}

}, [authorizeBoolean]);

推荐阅读