Изменение img sr c с помощью React Hook, для которого установлено событие onClick - PullRequest
Новая
       106

Изменение img sr c с помощью React Hook, для которого установлено событие onClick

1 голос
/ 03 августа 2020

Я пробовал разными способами решить эту проблему, но не могу найти решения. Короче говоря, это хакерский способ создания переключателя темного режима в моем приложении React.

По сути, я бы хотел, чтобы изображение sr c изменялось при возникновении события onClick. Я попытался добавить еще одну функцию в onClick, но React выдает ошибку о бесконечном l oop. 

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>

Я не уверен, как изменить источник. Я пробовал S CSS и тернарный оператор, но ничего не работает.

Любая помощь будет принята с благодарностью. Все, что я хотел бы сделать, это изменить изображение, когда кто-то щелкает изображение и оно переключается между цветовыми схемами.

Заранее спасибо!

1 Ответ

3 голосов
/ 03 августа 2020

Используйте троичный элемент изображения 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"
/>

Редактировать лето-туман-1х870

...