Изменение псевдокласса при нажатии на кнопку (React)

Рейтинг: 0Ответов: 1Опубликовано: 29.03.2023

Как изменить значение color для псевдокласса hover при нажатии на кнопку, чтобы после нажатия цвет при следующем наведении был другой?

CSS - код:

.r:hover {
  color: red;
}

JSX-код:

import React from 'react'
import './Main.css';//CSS-файл

//компонент Main
export function Main() {

  //функция для изменения цвета при наведении
  function f(){
    let r = document.getElementById("r");
    //сюда хочу написать код
  }

  //элемент, для которого меняем цвет при наведении, и кнопка
  return (
    <div>
      <p className='r' id='r'>Трансформатор</p>
      <button onClick={f}>ОК</button>
    </div>
  );
}

export default Main;
css javascript html reactjs typescript
Источник: Stack Overflow на русском

Ответы

▲ 2Принят

Нужно использовать state для изменения стилей компонентов. Для решения этой задачи, создаем состояние isClicked

import React, { useState } from 'react'
import './Main.css'; // CSS-файл

//компонент Main
export function Main() {

const [isClicked, setIsClicked] = useState(false);

// change color on hover
function handleClick() {
    setIsClicked(prevState => !prevState);
}

//элемент, для которого меняем цвет при наведении, и кнопка
return (
    <div>
      <p className={`r ${isClicked ? 'clicked' : ''}`} id='r'>Трансформатор</p>
      <button onClick={handleClick}>ОК</button>
    </div>
    );
}

export default Main;