Привязка ярлыка / горячей клавиши к div?Ограничить область действия ярлыка в React

Question

Я использую ярлыки в своем компоненте React, используя мышеловку:

  componentDidMount() {
    Mousetrap.bind(['space'], ()=>this.play());
  }
  componentWillUnmount() {
    Mousetrap.unbind(['space'], ()=>this.play());
  }  

Есть ли способ активировать эти ярлыки только тогда, когда этот компонент активен / на него нажимают / и т. Д.?и зарегистрировать тот же ярлык снова, когда другой компонент активен?