Javascript 如何在React上单击onKeyDown的特定按钮来播放音频？

我在一个鼓机项目中工作，但我没有通过一项任务。任务是：

当我按下与每个鼓垫相关联的触发键时，其子元素中包含的音频剪辑应被触发（例如，按下Q键应触发包含字符串“Q”的鼓垫，按下W键应触发包含字符串“W”的鼓垫等）

到目前为止，我的代码是：

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>

类Drumset扩展了React.Component{
建造师（道具）{
超级（道具）；
this.handleClick=this.handleClick.bind（this）；
this.handleKeyPress=this.handleKeyPress.bind（this）；
}
componentDidMount（）{
文件。添加了文本列表（“向下键”，此为手动按键）；
}
handleClick=（事件）=>{
const audio=event.target.children[0]；
音频播放（）；
};
handleKeyPress=（事件）=>{
如果(
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]；
音频播放；
控制台日志（“按键”）；
}
};
render（）{
返回(
Q

---

我的问题是，每当我按下一个键时，handleKeyPress（）函数都会工作，但音频不会播放（控制台显示打印）。当我按下相关按钮时，如何播放音频？

问题在于：在您的

handleKeyPress

处理程序中，

const audio=event.target.children[0]；

不以

音频元素为目标

我使用了
ref
来在用户单击
handleKeyPress
中提到的任何键时定位音频。无论何时使用
onKeyDown
synthetic事件，都必须使用
tabIndex={0}
。请尝试下面的代码：）

import React，{Component}来自“React”；
导出默认类DrumSet扩展组件{
建造师（道具）{
超级（道具）；
this.myRef=React.createRef（）；
}
componentDidMount（）{
文件。添加了文本列表（“向下键”，此为手动按键）；
}
handleKeyPress=（事件）=>{
console.log（event.key）；
如果(
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”
) {
这个.myRef.current.play（）；
控制台日志（“按键”）；
}
};
handleClick=（事件）=>{
const audio=event.target.children[0]；
音频播放（）；
};
render（）{
返回(
Q
);
}
}
audio.play；
不执行任何操作，只引用函数。您的意思是
audio.play（）
？@ggorlen在控制台中收到一个错误，显示audio.play（）不是我运行代码时的函数。@tanjimanim:您的问题解决了，请使用我提供的答案。如果您需要任何进一步的解释，请联系我，兄弟：）。请接受答案和费率，以便其他开发人员从中受益：）Thanks@ImranRafiqRather感谢兄弟们最欢迎的兄弟们。真主保佑你们：）做吧请给我的答案打分，并通过点击勾号图标来接受。这将激发我更多的动力，也会帮助其他开发人员解决同样的问题：）这个代码也给了我一个错误，即“无法读取null的属性'play'。行
this.myRef.current.play（）
导致了这一问题。它在我的机器上运行良好。我甚至先测试了它。亲爱的@tanjimanim：这个组件是最大项目的一部分，还是你的应用程序中只有一个组件。我们可以编写更好的代码，然后让它发挥作用。很抱歉，没有注意到这一行现在可以工作了
ref={this.myRef}
。顺便问一下，tabIndex做什么？tabIndex只是一个选项卡顺序。我们在键盘上有一个tab键，每次单击它时，都会聚焦一些DOM元素。tabIndex=“0”具体而言，这意味着在任何正tabindex值及其顺序由文档的源顺序定义后，元素应在顺序键盘导航中聚焦。由于React事件不是DOM事件，而是合成事件，因此建议将tabindex与onKeyDown事件一起使用。
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>
    );
  }
}