Как использовать псевдокласс :active при нажатии клавиши?

Question

[uuushka]

Суть такая, что есть компонента, которая меняет стиль при нажатии на нее мышью с помощью псевдокласса :active.
Тоже самое поведение мне необходимо сделать для клавиши. То есть при нажатии клавиши стиль меняется, при отжатии - возвращается в исходное состояние. убил много времени уже, к сожалению..

Answer 1

[Дмитрий Кравченко]

нужно отслеживать события keydown и keyup, добавлять и убирать классы на нужных элементах

UPD
Для реакта не напишу, пример с jquery

var $elementToHighlight = $('#someId');
$(document).on('keydown',function(e){
  if(e.keyCode==13){
    //enter
    $elementToHighlight.addClass('hightlighted');
  }
}).on('keyup',function(){
  $elementToHighlight.removeClass('hightlighted');
});

Answer 2

[uuushka]

Дмитрий Кравченко ,т.е. что-то такое:

handleOnKeyUp() {
  this.setState({isPressed: this.state.isPressed})
};

handleOnKeyDown() {
  this.setState({isPressed: this.state.isPressed})
};

render(){
    var style = classNames({
       "pressed-style": this.state.isPressed,
       "unpressed-style": !this.state.isPressed    
})
     return  <button className={style}
                 onKeyUp={this.handleOnKeyUp}
                 onKeyDown={this.handleOnKeyDown}
                 >Button</button>;
}

Comments

[Дмитрий Кравченко]

"Тоже самое поведение мне необходимо сделать для клавиши" - для кнопки или для клавиши на клавиатуре? если первое, то это прописывается в CSS: .button{background:red;} .button:active{background:green;}

[uuushka]

Дмитрий Кравченко: для клавиши клавиатуры, например, Enter. Для мыши ясно как делать)

[Дмитрий Кравченко]

uuushka: отредактировал свой ответ выше