Изменить класс компонента css с помощью onClick на Icon в React, используя хук useState - PullRequest
Новая
       18

Изменить класс компонента css с помощью onClick на Icon в React, используя хук useState

0 голосов
/ 01 мая 2020

Я новичок в React, и я надеялся, что кто-нибудь сможет мне помочь с этой проблемой. Я пытаюсь визуализировать некоторые изображения, называемые «карточками», из массива, основанного на тех же данных, которые я получил от Ax ios. Мне в основном нужно визуализировать массив карточных реквизитов с тегом <i> с прикрепленным к ним классом font-awesome. Когда я нажимаю на иконку "fa-search-plus" font-awesome, я хочу, чтобы родительский элемент этого значка <div> вызвал onClick так, чтобы свойство css родственного элемента <img> этого <div> может быть изменено. По какой-то причине в следующем коде этого не происходит. Любое исправление приветствуется. Спасибо! 

const GameCards = (cards) => {

  const [cardimgclass, setCardimgclass] = useState(true);

  const onClick = (e) => {
    e.preventDefault();
    setCardimgclass(!cardimgclass);
  };

  const loadCardsByCategory = (cards) => {
    var allCards = [];
    if (cards)
      cards.forEach((item, i) => {
        allCards.push(
          <div key={item._id} className="card-container">
            <img
              className={cardimgclass ? "card-reg" : "card-big"}
              src={item.src}
              alt="No file"
            />
            <div onClick={(e) => onClick(e)}>
              {" "}
              <i className="fas fa-search-plus"></i>
            </div>
          </div>
        );
      });
    return allCards;
  };

  const loadCards = (cards) => {
  return (
      <Fragment>
         <div className="cardgallery">{loadCardsByCategory(cards)}</div>
      </Fragment>      
 )
};

  const loadCardsUsingMemo = useMemo(() => loadCards(cards), [cards]);
  return  <Fragment>{loadCardsUsingMemo}</Fragment>;
};

1 Ответ

0 голосов
/ 01 мая 2020

Похоже, что ваша основная проблема в том, что вы не разрушаете свой реквизитный объект:

const GameCards = cards => {

Вам необходимо изменить это значение на:

const GameCards = ({ cards }) => {

Также удалите вещи useMemo. Это не помогает вам здесь. Вот уменьшенная версия вашего кода. Я изменяю свойство background-color вместе с классом, но концепция та же самая. Надеюсь, это поможет!

РЕДАКТИРОВАТЬ: Также обратите внимание, как в примере, ваш лог c в настоящее время меняет все элементов. Если вы хотите изменить класс только для одного элемента, вы можете использовать метод передачи индекса (или, еще лучше, ID!). Вот пример: 

const [cardimgclass, setCardimgclass] = useState();

...

const onClick = (e, item) => setCardimgclass(item._id)

...

<div onClick={e => onClick(e, item)} />
...