React-Spring 视差层内的可点击组件不起作用？

Question

我正在尝试使用 React Spring 在我的视差层之一中构建一个导航栏。导航栏按钮不可点击，我很困惑为什么。我已经搜索了一段时间，但无法找到有关如何使组件在视差层中运行的文档。谢谢！

我的导航栏组件 `

function NavBar() {

    const clicked = () => {
        return(
            console.log('clicky clacky')
        )
    }

    return (
        <div>

            <nav className="layer">
                <button onClick={clicked} className="button">Daily Facts</button>
                <button onClick={clicked} className="button">Alien Town</button><button onClick={clicked} className="button">Another Dimension</button>
            </nav> 
        </div>
    );                       
}

export default NavBar;

我的应用程序组件具有所有视差层，导航栏组件一直放置在底部

import { Parallax, ParallaxLayer } from "@react-spring/parallax";
import moon from "./pixil-layer-Moon.png"
import stars1 from "./pixil-layer-2.png"
import stars2 from "./pixil-layer-3.png"
import ufo from "./pixil-layer-4.png"
import planet from "./planet.png"
import { Link } from "react-router-dom"
import NavBar from "./NavBar";


function Homepage() {

    return (
        <div>
            <Parallax pages={4}>

                <ParallaxLayer
                    offset={0}
                    factor={4}
                    style={{
                        backgroundImage: `url(${moon})`,
                        backgroundSize: 'cover'
                    }}
                >
                </ParallaxLayer>

                <ParallaxLayer
                    offset={0}
                    factor={4}
                    speed={.5}
                    style={{
                        backgroundImage: `url(${planet})`,
                        backgroundSize: 'cover',
                    }}
                >
                </ParallaxLayer>

                <ParallaxLayer
                    offset={0}
                    speed={.5}
                    factor={3}
                    style={{
                        backgroundImage: `url(${stars1})`,
                        backgroundSize: 'cover'
                    }}
                >
                </ParallaxLayer>

                <ParallaxLayer
                    offset={0}
                    speed={2}
                    factor={4}
                    style={{
                        backgroundImage: `url(${stars2})`,
                        backgroundSize: 'cover'
                    }}
                >
                </ParallaxLayer>

                <ParallaxLayer
                    sticky={{ start: 0, end: 3 }}
                >
                    <img style={{ width: '1500px', height: 'auto' }} src={ufo} />
                </ParallaxLayer>

                <ParallaxLayer
                    offset={3}
                    speed={.5}
                >
                    <div className="text">
                        <h1>Space Is The Place!</h1>
                    </div>
                    <NavBar />
                </ParallaxLayer>
            </Parallax>
        </div>
    );
}

export default Homepage`

Answer 1

我遇到了类似的问题。在我的例子中发生的情况是视差层具有更高的 z-index，将其放置在按钮上方。这使得按钮无法点击。使用检查元素并在 onclick() 方法中添加 console.log 可能有助于调试。希望这有帮助！