使用具有设置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和三元运算符，但是似乎都不起作用。

非常感谢任何帮助！我想要做的就是在某人单击图像并在颜色方案之间切换时更改图像。

提前感谢你！

- BuiltByDan

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"
/>

- Drew Reese

---

谢谢Drew，这个完美地运行了，现在看起来似乎很简单！由于这是本地的，我无法看到图像渲染，因为我没有使用require()。 - BuiltByDan