使用设置了 onClick 事件的 React Hook 更改 img src

Question

我尝试了多种方法来解决这个问题，但似乎找不到解决方案。长话短说，这是在我的 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 和三元运算符，但似乎没有任何效果。

如有任何帮助，我们将不胜感激。我想做的就是在有人单击图像时更改图像，它会在配色方案之间切换。

提前致谢！

Answer 1

在图像上使用三元组 src 在两个源 URL 之间交换。

<img
  className="mode-switch ml-auto"
  onClick={() => setLightMode(prevMode => !prevMode)}
  src={lightMode ? "/path/to/img1" : "path/to/img2"}
  alt="lightning-bolt"
  height="30px"
/>

使用设置了 onClick 事件的 React Hook 更改 img src

Changing img src with React Hook that has a set onClick event

javascript

dom-events

reactjs

react-hooks