Значок переключения кнопки onclick не работает в reactjs

Здесь я пытаюсь переключить реагирующие значки при нажатии кнопки, но это все еще не работает:

Вот мой код:

const [anchorEl, setAnchorEl] = useState(null);

  const open = Boolean(anchorEl);
  const handleClick = (event) => {
    setAnchorEl(event.currentTarget);
  };
  const handleClose = () => {
    setAnchorEl(null);
  };

   <button onClick={handleClick} className="top-rated-car-react-button">
            {anchorEl ? (
              <MdFavoriteBorder
                style={{
                  color: "#F76631", 
                }}
              />
            ) : (
              <MdFavorite
                style={{
                  color: "#F76631",
                }}
              />
            )}
   </button>

Я пытаюсь с помощью кнопок реагировать на значки события Click, но он не переключается с обоими значками, если MdFavoriteBorder он должен меняться с помощью MdFavorite при нажатии кнопки так же, как при активном изменении MdFavorite с помощью MdFavoriteBorder

Когда вы вызываете дескриптор закрытия?

Igor Gonak 17.05.2022 21:08

когда MdFavoriteBorder активен, он должен измениться на MdFavorite, если щелкнуть так же, как и оба

shawn 17.05.2022 21:13
Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Сравнение структур данных: Массивы и объекты в Javascript
Сравнение структур данных: Массивы и объекты в Javascript
Итак, вы изучили основы JavaScript и хотите перейти к изучению структур данных. Мотивация для изучения/понимания Структур данных может быть разной,...
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Прошлая статья была первой из цикла статей о создании системы электронной коммерции с использованием Keystone.js, и она была посвящена главным образом...
Приложение для отслеживания бюджета на React js для начинающих
Приложение для отслеживания бюджета на React js для начинающих
Обучение на практике - это проверенная тема для достижения успеха в любой области. Если вы знаете контекст фразы "Практика делает человека...
Стоит ли использовать React в 2022 году?
Стоит ли использовать React в 2022 году?
В 2022 году мы все слышим о трендах фронтенда (React, Vue), но мы не знаем, почему мы должны использовать эти фреймворки, когда их использовать, а...
0
2
24
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Выглядит слишком сложно. Я бы создал логическое состояние, которое я бы переключал следующим образом:

import { useState } from "react";
import { MdFavorite, MdFavoriteBorder } from "react-icons/md";

export default function App() {
  const [favorite, setFavorite] = useState(false);
  const toggleFavorite = () => setFavorite((prev) => !prev);

  return (
    <button onClick={toggleFavorite} className="top-rated-car-react-button">
      {favorite ? (
        <MdFavoriteBorder style={{ color: "#F76631" }} />
      ) : (
        <MdFavorite style={{ color: "#F76631" }} />
      )}
    </button>
  );
}

https://codesandbox.io/s/cool-poincare-wm1ite

Вы можете сделать это простым способом, например

const [changeIcon, setChangeIcon] = useState(true);
  const handleClick = (event) => {
    setAnchorEl(!changeIcon);
  };

   <button onClick={handleClick} className="top-rated-car-react-button">
            {changeIcon ? (
              <MdFavoriteBorder
                style={{
                  color: "#F76631", 
                }}
              />
            ) : (
              <MdFavorite
                style={{
                  color: "#F76631",
                }}
              />
            )}
   </button>

При щелчке setChangeIcon установит для changeIcon значение false или true в зависимости от предыдущего состояния, и компонент перезагрузится, а значок будет переключен.

Другие вопросы по теме