视差层内的可点击组件与React-Spring不工作?

Question

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

导航栏组件'

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;

我的app组件的所有视差层，导航栏组件一直放在底部

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指数，这将其放置在按钮上方。这使得按钮无法点击。使用inspect元素并在onclick()方法中添加console.log可能有助于调试。希望这对你有帮助!