使用具有設置 onClick 事件的 React Hook 更改 img src

Question

我嘗試了多種方法來解決這個問題，但似乎無法找到解決方案。 長話短說，這是在我的 React 應用程序上創建暗模式切換的一種 hacky 方式。

本質上，我希望在 onClick 事件發生時更改圖像 src。 我嘗試將另一個 function 添加到 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"
/>