Как использовать React Hook useeffect с добавлением обработчика событий, зависящего от состояния?

У меня есть компонент авторизации, в него включены другие компоненты - такие поля, как имя пользователя, пароль и т. Д. Я пытаюсь создать реагирующий перехватчик useeffect, где я хочу добавить подписку на событие keyDown «X». В этом случае я хочу выполнить функцию Authorize (), которая находится в теле компонента (а не в теле крючка) и зависит от состояния компонента авторизации.

Итак, единственное решение, которое я нашел, было:

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

Но я не думаю, что это правильно, потому что эта подписка / отказ от подписки выполняется при каждом изменении состояния пользователя. Пожалуйста помоги.


reactjs react-hooks use-effect addeventlistener event-handling
person Vera    schedule 30.08.2019    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Итак, вы хотите запускать определенные функции в useEffect в зависимости от значения логического состояния, верно? Если это так, вы можете использовать условные выражения в useEffect ловушках и повторно выполнять рендеринг при изменении какого-либо состояния. Например, примерно так:

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

}, [authorizeBoolean]);
person mvkdiegnhoiw    schedule 30.08.2019
comment
хороший ответ. просто authorizeBoolean не должен ограничивать добавление слушателя. Скорее следует ограничить только authorize(). - person Joseph D.; 30.08.2019
comment
Если вы имеете в виду, что мне нужно переключить authorizeBoolean только один раз после монтирования компонента, как я понимаю, пользователь элемента состояния будет иметь значение = initialValue при выполнении Authorize (), это неверно. - person Vera; 30.08.2019