java点击按钮发出声音_响应触发按钮声音onKeyPress问题

我正在学习React并致力于构建drum machine . 我在按钮点击时使用onKeyPress触发声音时遇到问题 . 使用鼠标单击时按钮和声音工作正常，但为了让它们在键盘上工作，您首先必须用鼠标单击该按钮 .

看起来，一旦你点击一个按钮保持聚焦，直到用鼠标点击另一个按钮 .

如何使用onKeyPress触发按键按钮？ onKeyPress不是处理这样的事情的正确方法吗？

看来这是与点击时关注的按钮有关的问题 .

这是代码：

我有一个鼓显示组件，每个按钮/ div看起来像这样：

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 (

onClick={() => props.handleClick(props.id, props.soundName)}

onKeyPress={() => props.handleClick(props.id, props.soundName)}

tabIndex="0">

{props.id}

);

}

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 (

buttonClicked={this.state.buttonClicked}

name={this.state.name}

handleClick={this.handleClick}

onKeyPress={this.handleClick}

/>

);

}

}

export default App;

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