Блог

У меня есть пользовательский компонент выбора. Я хочу добавить навигацию по клавиатуре (параметры навигации с помощью клавиш со стрелками и выберите один с помощью «enter»). Обычно эти прослушиватели событий подключаются к окну. Но что, если у меня есть два выбора на одной странице? Нажатие стрелки вниз вызовет действие в обоих компонентах.

Как бы вы изменили этот код, чтобы убедиться, что он остается в пределах каждого выбора?

 React.useEffect(() => {
     window.addEventListener('keydown', handleKeyDown);
      // do stuff
    });
    
    return () => {
      window.removeEventListener('keydown', handleKeyDown);
    };
  }, []);  

Если вам действительно нужно прослушать событие в окне глобально, вы можете проверить target свойство события:

 function Element(props) {
    
    const element = useRef(null);

    function handleKeyDown(event) {
        if(event.target === element.current) {
            //do stuff
        }        
    }

    useEffect(()=> {
        window.addEventListener('keydown', handleKeyDown);
    
        return ()=> {
            window.removeEventListener('keydown', handleKeyDown);
        };
    }, [])

    return <div ref={element}>
        // element content
    </div>
    
}
  

Но, может быть, было бы лучше прослушать событие в локальном элементе:

 function Element(props) {
    
    const element = useRef(null);

    function handleKeyDown(event) {
        //do stuff
    }

    useEffect(()=> {
        if(element.current) {
            element.current.addEventListener('keydown', handleKeyDown);
            return ()=> {
                element.current.removeEventListener('keydown', handleKeyDown);
            };
        }
    }, [])

    return <div ref={element}>
        // element content
    </div>
    
}