Есть ли способ изменить css кнопки при нажатии клавиши?

Question

https://codepen.io/corpsist/pen/NWGZqOb

class DrumPad extends React.Component{
constructor(props){
super(props);
}

render(){
return(
  <div>
              <button type="button" id='Q' className="btn btn-lg btn-dark" onClick=this.handleClick}>Q</button>

  </div> )

}}

Необходимо изменить CSS, чтобы кнопка при нажатии выглядела так же, как при нажатии.

Answer 1

Я предполагаю, что вы используете структуру Bootstrap, поэтому вам нужно переопределить стили для псевдоклассов .btn - *** следующим образом:

.btn-dark.focus, .btn-dark:focus {
...your styles go here...
}

.btn-dark(:disabled):not(.disabled).active, .btn-dark(:disabled):not(.disabled):active {
    ...your styles go here...
}

Answer 2

Вы можете прикрепить onKeyDown к контейнеру и получить нажатую клавишу и использовать это для установки некоторого состояния для переключения класса boostrap .active вручную.

(Я переработал ваш компонент a бит, чтобы упростить работу)

class DrumPad extends React.Component {
  constructor(props) {
    super(props);
    this.state = { activeButton: "" };
    this.buttons = [["Q", "W", "E"], ["A", "S", "D"], ["Z", "X", "C"]];
  }
  onKeyDown = e => {
    this.setState({ activeButton: e.key.toUpperCase() });
  };

  onMouseDown = buttonId => {
    this.setState({ activeButton: buttonId });
  };

  render() {
    const { activeButton } = this.state;
    return (
      <div className="container-fluid d-flex" onKeyDown={this.onKeyDown}>
        <div>
          {this.buttons.map(buttonRow => (
            <div className="row-sm-4">
              <div class="btn-group-toggle">
                {buttonRow.map(buttonId => (
                  <button
                    id={buttonId}
                    key={buttonId}
                    className={`btn btn-lg btn-dark ${
                      activeButton === buttonId ? "active" : ""
                    }`}
                    onMouseDown={() => this.onMouseDown(buttonId)}
                  >
                    {buttonId}
                  </button>
                ))}
              </div>
            </div>
          ))}
        </div>
      </div>
    );
  }
}

Мне также пришлось немного поиграть со стилями bootstrap:

.btn {
  margin: 3px;
}
.btn-group-toggle button.btn.btn-dark:focus,
.btn-group-toggle button.btn.btn-dark:active {
  box-shadow: none;
}

button.active {
  box-shadow: 0 0 0 0.2rem rgba(82, 88, 93, 0.5);
}

Обновлен код здесь

Answer 3

Используйте комбинацию клавиш / клавиш для переключения цвета с помощью jquery

$("button").keydown(function(e) {
    // Sets the color when the key is down...
    if(e.which === 13) {
    	$(this).css("background-color", "purple");
    }
});
$("button").keyup(function() {
    // Removes the color when any key is lifted...
    $(this).css("background-color", "");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>
Test
</button>