Javascript 反应：playNote（）未定义函数错误

我会很简短，我正在尝试制作一个钢琴应用程序，在应用程序的第一个阶段，通过鼠标点击播放音符，稍后我想在键盘按钮上这样做。所以我有一个问题，我不知道我是否正确地调用了一个函数，甚至我是否正确地执行了forEach循环

import React, { Component, Fragment } from 'react'
import NoteA from './notes/A.mp3';
import NoteAb from './notes/Ab.mp3';
import NoteB from './notes/B.mp3';
import NoteBb from './notes/Bb.mp3';
import NoteC from './notes/C.mp3';
import NoteD from './notes/D.mp3';
import NoteDb from './notes/Db.mp3';
import NoteE from './notes/E.mp3';
import NoteEb from './notes/Eb.mp3';
import NoteF from './notes/F.mp3';
import NoteG from './notes/G.mp3';
import NoteGb from './notes/Gb.mp3';

const keys = document.querySelectorAll('.key');
keys.forEach(key => {
    key.addEventListener('click', () => playNote(key));
})


class Piano extends Component {

    playNote = (key) => {
        const noteAudio = document.getElementById(key.dataset.note);
        noteAudio.play();
    };

    render() {
        return (
            <Fragment>
            <div class="piano">
                <div data-note="C" class="key white"></div>
                <div data-note="Db" class="key black"></div>
                <div data-note="D" class="key white"></div>
                <div data-note="Eb" class="key black"></div>
                <div data-note="E" class="key white"></div>
                <div data-note="F" class="key white"></div>
                <div data-note="Gb" class="key black"></div>
                <div data-note="G" class="key white"></div>
                <div data-note="Ab" class="key black"></div>
                <div data-note="A" class="key white"></div>
                <div data-note="Bb" class="key black"></div>
                <div data-note="B" class="key white"></div>
            </div>

            <audio id="C" src="../notes/C.mp3"></audio>
            <audio id="Db" src="../notes/Db.mp3"></audio>
            <audio id="D" src="../notes/D.mp3"></audio>
            <audio id="Eb" src="../notes/Eb.mp3"></audio>
            <audio id="E" src="../notes/E.mp3"></audio>
            <audio id="F" src="../notes/F.mp3"></audio>
            <audio id="Gb" src="../notes/Gb.mp3"></audio>
            <audio id="G" src="../notes/G.mp3"></audio>
            <audio id="Ab" src="../notes/Ab.mp3"></audio>
            <audio id="A" src="../notes/A.mp3"></audio>
            <audio id="Bb" src="../notes/Bb.mp3"></audio>
            <audio id="B" src="../notes/B.mp3"></audio>

            </Fragment>
        )
    }
}

export default Piano

import React，{Component，Fragment}来自“React”
从“./notes/A.mp3”导入NoteA；
从“./notes/Ab.mp3”导入NoteAb；
从“./notes/B.mp3”导入NoteB；
从“./notes/Bb.mp3”导入noteb；
从“./notes/C.mp3”导入NoteC；
从“/notes/D.mp3”导入注释；
从“./notes/Db.mp3”导入NoteDb；
从“./notes/E.mp3”导入NoteE；
从“./notes/Eb.mp3”导入noteb；
从“./notes/F.mp3”导入NoteF；
从“./notes/G.mp3”导入NoteG；
从“./notes/Gb.mp3”导入NoteGb；
const keys=document.queryselectoral（'.key'）；
keys.forEach（key=>{
key.addEventListener（'click'，（）=>playNote（key））；
})
类扩展组件{
playNote=（键）=>{
const noteAudio=document.getElementById（key.dataset.note）；
noteAudio.play（）；
};
render（）{
返回(
)
}
}
导出默认钢琴

---

另外，我是React新手，我在YouTube上看了一个教程，guy用Vanilla JavaScript开发了这种类型的应用程序，所以我想尝试一下是否可以通过React。

您不需要在组件外部附加click listener。直接在jsx/html中执行

类扩展组件{
playNote=（id）=>{
const noteAudio=document.getElementById（id）；
noteAudio.play（）；
};
render（）{
返回(
this.playNote（'C'）}>
this.playNote（'Db'）}>
)
}
}
导出默认钢琴

您不需要在组件外部附加click listener。直接在jsx/html中执行

类扩展组件{
playNote=（id）=>{
const noteAudio=document.getElementById（id）；
noteAudio.play（）；
};
render（）{
返回(
this.playNote（'C'）}>
this.playNote（'Db'）}>
)
}
}
导出默认钢琴

使用refs，因为您使用React。在componentDidMount中使用它：

componentDidMount() {
        //Set event listeners for keypress
        window.addEventListener("keyup", this.keyPress);
}

其中，事件侦听器具有回调方法，该方法通过引用音频播放声音。

---

我在FCC课程中也做过类似的事情：

使用refs，因为您使用React。在componentDidMount中使用它：

componentDidMount() {
        //Set event listeners for keypress
        window.addEventListener("keyup", this.keyPress);
}

其中，事件侦听器具有回调方法，该方法通过引用音频播放声音。

---

我在FCC课程中也做过类似的事情：

您也可以通过点击

onClick

传递事件，并使用

e.target.getAttribute（“数据注释”）

获取id，这是可能的，但只是为了让OPFair更加清晰。我想我做错了，输入了一个“.key”类，在这里我只把一个类作为一个div属性，但React要求className，可能错误在那里？你是对的@ravenousHydra。修正你的代码。我将更新Mine您也可以通过单击

onClick

传递事件，并使用

e.target.getAttribute（“数据注释”）

获取id，这是可能的，但只是为了让OPFair更清晰。我想我做错了，输入了一个“.key”类，在这里我只把一个类作为一个div属性，但React要求className，可能错误在那里？你是对的@ravenousHydra。修正你的代码。我会更新我的