问Javascript 30课程的反应
EN

Stack Overflow用户

提问于 2021-08-20 15:06:02

回答 1查看 64关注 0票数 2

你好，我不明白为什么我在这里有一个错误。这个错误是一个意料之外的标记，"，“(33:8)有人能帮我解释一下为什么会发生这种情况吗？

我还试图将代码放入返回语句的正文中，但是对于const (第32行)和键，我也给出了相同的错误。

import React from 'react'; <br>
import Clap from './sounds/clap.wav'; <br>
import Hihat from './sounds/hihat.wav'; <br>
import Kick from './sounds/kick.wav'; <br>
import Openhat from './sounds/openhat.wav'; <br>
import Boom from './sounds/boom.wav'; <br>
import Ride from './sounds/ride.wav'; <br>
import Snare from './sounds/snare.wav'; <br>
import Tom from './sounds/tom.wav'; <br>
import Tink from './sounds/tink.wav'; <br>

import './Drumkit.css';

const Drumkit = () => {
    
    window.addEventListener('keydown', function(e) {
        const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
        const key = document.querySelector(`.key[data-key="${e.keyCode}"]`);
        if (!audio) return;
        audio.currentTime = 0;
        audio.play();
        key.classList.add('playing');
        })
    

    
        function removeTransition(e) {
            if(e.propertyName !== 'transform') return;
            this.classList.remove('playing');
        }

        const keys = ( document.querySelectorAll('.key')
        keys.forEach(key => key.addEventListener('transitionend', removeTransition))
        window.addEventListener('keydown', playSound)
    

    
    
    

    return (
            <body>

                <div class="keys">
                    <div data-key="65" class="key">
                        <kbd>A </kbd>
                        <span class="sound">clap</span>
                    </div>
                    <div data-key="83" class="key">
                        <kbd>S</kbd>
                        <span class="sound">hihat</span>
                    </div>
                    <div data-key="68" class="key">
                        <kbd>D</kbd>
                        <span class="sound">kick</span>
                    </div>
                    <div data-key="70" class="key">
                        <kbd>F</kbd>
                        <span class="sound">openhat</span>
                    </div>
                    <div data-key="71" class="key">
                        <kbd>G</kbd>
                        <span class="sound">boom</span>
                    </div>
                    <div data-key="72" class="key">
                        <kbd>H</kbd>
                        <span class="sound">ride</span>
                    </div>
                    <div data-key="74" class="key">
                        <kbd>J</kbd>
                        <span class="sound">snare</span>
                    </div>
                    <div data-key="75" class="key">
                        <kbd>K</kbd>
                        <span class="sound">tom</span>
                    </div>
                    <div data-key="76" class="key">
                        <kbd>L</kbd>
                        <span class="sound">tink</span>
                    </div>
                </div>

                <audio data-key="65" src={Clap}></audio>
                <audio data-key="83" src={Hihat}></audio>
                <audio data-key="68" src={Kick}></audio>
                <audio data-key="70" src={Openhat}></audio>
                <audio data-key="71" src={Boom}></audio>
                <audio data-key="72" src={Ride}></audio>
                <audio data-key="74" src={Snare}></audio>
                <audio data-key="75" src={Tom}></audio>
                <audio data-key="76" src={Tink}></audio>

            </body>
        )
}

export default Drumkit;

reactjs

jsx

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-08-20 15:17:53

代码的这一部分似乎是

const keys = ( document.querySelectorAll('.key')

尝试将其更改如下：

const keys = document.querySelectorAll('.key')

keys.forEach(key => key.addEventListener(
    'transitionend',
    removeTransition
))

window.addEventListener('keydown', playSound)

我认为这是您的问题，如果不尝试在if语句中添加括号，那么如果使用不当，简化的ifs就会出现问题。

if(e.propertyName !== 'transform'){
    return;
}

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/68864339

复制

相似问题

问Javascript 30课程的反应
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Javascript 30课程的反应EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Javascript 30课程的反应
EN