响应触发按钮声音onKeyPress问题

我正在学习React并致力于构建drum machine . 我在按钮点击时使用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;

一直困在关键问题上的KeyPress问题上 . 任何帮助表示赞赏 .