Реакция звука кнопки триггера на проблему KeyPress - PullRequest
Новая
       37

Реакция звука кнопки триггера на проблему KeyPress

0 голосов
/ 28 августа 2018

Я изучаю React и работаю над созданием драм-машины . У меня возникли проблемы с включением звука при нажатии кнопки с помощью onKeyPress. Кнопки и звуки работали нормально при нажатии мышью, но чтобы заставить их работать на клавиатуре, сначала нужно нажать эту кнопку мышью.

Кажется, что как только вы нажимаете кнопку, кнопка остается в фокусе, пока другая кнопка не будет нажата мышью.

Как я могу использовать onKeyPress для запуска кнопок с помощью клавиш? Является ли onKeyPress неправильным способом обработки чего-либо подобного?

Похоже, что это проблема, относящаяся к кнопкам, на которые фокусируются при нажатии.

Вот код:

У меня есть компонент отображения барабана, где каждая кнопка / div выглядит следующим образом: 

    <DrumPad
      id='Q'
      soundName='Heater 1'
      sound="https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3"
      buttonClicked={props.buttonClicked}
      name={props.name}
      handleClick={props.handleClick}
      onKeyPress={props.onKeyPress}
    />

Затем в другом компоненте у меня есть компонент барабанной панели, который настраивает каждую кнопку и ее функциональность: 

import React, { Component } from 'react';


const DrumPad = (props) => {
  return (
    <div className="drum-pad"
      onClick={() => props.handleClick(props.id, props.soundName)}
      onKeyPress={() => props.handleClick(props.id, props.soundName)}
      tabIndex="0">

      <audio className="clip" id={props.id}>
        <source src={props.sound} type="audio/mp3" />
      </audio>
      <span>{props.id}</span>

    </div>
  );
}


export default DrumPad;

Основной компонент моего App.js прост и состоит из локального состояния и функции handleClick для обработки нажатий кнопок: 

import React, { Component } from 'react';
import './App.css';
import DrumDisplay from './DrumContainer';
import MySlider from './Slider.js';
import handle from './Slider.js';
import Slider, { Range } from 'rc-slider';
import 'rc-slider/assets/index.css';
import 'rc-tooltip/assets/bootstrap.css';
import Tooltip from 'rc-tooltip';

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      buttonClicked: '',
      name: ''
    }
  }

  handleClick = (e, name) => {
    this.setState({ buttonClicked: e })
    this.setState({ name: name})

    const sound = document.getElementById(e);
    sound.volume = 1;
    sound.play();

  }


  render() {
    return (
      <DrumDisplay
        buttonClicked={this.state.buttonClicked}
        name={this.state.name}
        handleClick={this.handleClick}
        onKeyPress={this.handleClick}
      />
    );
  }
}

export default App;

На некоторое время застрял на этой кнопке при нажатии клавиши. Любая помощь приветствуется.

...