我尝试了多种方法来解决这个问题,但似乎找不到解决方案。长话短说,这是在我的React应用程序上创建深色模式切换的hacky方法。
实际上,当发生onClick事件时,我想要更改图像src。我尝试将另一个函数添加到onClick中,但React会抛出关于无限循环的错误。
const App = () => {
const [lightMode, setLightMode ] = React.useState(false)
return (
<Router>
<div className={lightMode ? "light-mode" : "dark-mode"}>
<Container>
<Navbar.Brand className={lightMode ? "light-mode" : "dark-mode"} href="/">Built By Dan.</Navbar.Brand>
<img
className="mode-switch ml-auto"
onClick={() => setLightMode(prevMode => !prevMode)}
src="/media/bolt.png"
alt="lightning-bolt"
height="30px"
/>
</Container>
</Router>
我不确定如何更改源代码,我已经尝试了SCSS和三元运算符,但是似乎都不起作用。
非常感谢任何帮助!我想要做的就是在某人单击图像并在颜色方案之间切换时更改图像。
提前感谢你!