изменения шрифта, или фона элемента списка после редактирования(или клика) JS

Question

Друзья, задача довольно простая, но никак не могу реализовать ее. Необходимо изменить шрифт, или фон элемента списка после редактирования(или клика) на React, JS. Возможно можно как-то достучаться к элементу списка

через dom дерево? У меня что-то не выходит :( Прошу помощи фрагмент кода:

 function changeBackground(e) {
  document.querySelector("elementUserCard");
  e.current.target.style.backgroundColor = color;
  }

return(
...
          <ul>
          {users.map((user) => (
            <li
              //   onClick={() => changeBackground()}
              className={s.elementUserCard}
              key={user.id}
            >
              <User user={user} />
              <div className={s.buttonContainer}>
                <button type="button" onClick={() => deleteUserById(user.id)}>
                  Delete
                </button>
                <button type="button" onClick={(e) => toggleModal(user)}>
                  Edit
                </button>
              </div>
            </li>
          ))}
        </ul>
...

Answer 1

У вас className задан через импортированные стили s.elementUserCard, а это значит что у него будет свой уникальный идентификатор (рандомный набор букаф). Именно по этой причине вы не можете до него достучаться (document.querySelector("elementUserCard");)

Решение (ЭТО ПСЕВДОКОД): Тебе нужно создать локальный стейт твоего заднего фона. При клике мы будем проверять его предыдущее значение и ставить новое, в зависимости от старого.


const [color, setColor] = useState('black');

function changeBackground() {
  setColor((prevState) => (prevState === 'black' ? 'white' : 'black'));
}

return(
...
          <ul>
          {users.map((user) => (
            <li
              onClick={() => changeBackground()}
              className={[{backgroundColor: color}, s.elementUserCard}]}
              key={user.id}
            >
              <User user={user} />
              <div className={s.buttonContainer}>
                <button type="button" onClick={() => deleteUserById(user.id)}>
                  Delete
                </button>
                <button type="button" onClick={(e) => toggleModal(user)}>
                  Edit
                </button>
              </div>
            </li>
          ))}
        </ul>

БЛОГ НА HUSL

изменения шрифта, или фона элемента списка после редактирования(или клика) JS

Ответы (1 шт):