我正在做一个鼓机项目，我没有通过一个任务。任务是:
当我按下与每个。drum-pad相关联的触发器键时，包含在其子元素中的音频剪辑应该被触发（例如按Q键应该触发包含字符串“Q”的drump pad，按W键应该触发包含字符串“W”的drump pad，等等）。
到目前为止我的代码:
class Drumset extends React.Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
this.handleKeyPress = this.handleKeyPress.bind(this);
}
componentDidMount() {
document.addEventListener("keydown", this.handleKeyPress);
}
handleClick = (event) => {
const audio = event.target.children[0];
audio.play();
};
handleKeyPress = (event) => {
if (
event.key === "q" ||
event.key === "w" ||
event.key === "e" ||
event.key === "a" ||
event.key === "s" ||
event.key === "d" ||
event.key === "z" ||
event.key === "x" ||
event.key === "c"
) {
const audio = event.target.children[0];
audio.play;
console.log("key pressed");
}
};
render() {
return (
<div>
<div id="drum-machine" class="containerx box-middle">
<div id="display" onKeyDown={this.handleKeyPress}>
<div class="container">
<div class="row">
<div class="col">
<button
type="button"
class="drum-pad"
id="Heater-1"
onClick={this.handleClick}
>
Q
<audio
class="clip"
id="Q"
src="https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3"
type="audio/mpeg"
></audio>
</button>
我的问题是，每当我按下一个键时，handleKeyPress（）函数工作，但音频不播放（控制台显示打印）。当我按下关联按钮时如何播放音频？
问题是:在HandleKeyPress处理程序中，const audio=event.target.children[0]；不针对audio元素。
当用户单击handlekeypress中提到的任何一个键时，我使用ref来锁定音频。此外，每当我们使用OnKeyDown合成事件时，我们必须使用TabIndex={0}。请尝试以下代码:）
import React, { Component } from "react";
export default class DrumSet extends Component {
constructor(props) {
super(props);
this.myRef = React.createRef();
}
componentDidMount() {
document.addEventListener("keydown", this.handleKeyPress);
}
handleKeyPress = (event) => {
console.log(event.key);
if (
event.key === "q" ||
event.key === "w" ||
event.key === "e" ||
event.key === "a" ||
event.key === "s" ||
event.key === "d" ||
event.key === "z" ||
event.key === "x" ||
event.key === "c"
) {
this.myRef.current.play();
console.log("key pressed");
}
};
handleClick = (event) => {
const audio = event.target.children[0];
audio.play();
};
render() {
return (
<div>
<div id="drum-machine" className="containerx box-middle">
<div id="display" onKeyDown={this.handleKeyPress} tabIndex={0}>
<div className="container">
<div className="row">
<div className="col">
<button type="button" className="drum-pad" id="Heater-1">
Q
<audio
className="clip"
id="Q"
src="https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3"
type="audio/mpeg"
ref={this.myRef}
></audio>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
);
}
}
