Как задать стили элемента по клику мыши в react.js?

@velma 

В React.js для изменения стилей элемента по клику мыши можно использовать стейт и условный оператор в методе render компонента. Вот пример:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

import React, { useState } from 'react';

const MyComponent = () => {
  const [clicked, setClicked] = useState(false);

  const handleClick = () => {
    setClicked(!clicked);
  };

  return (
    
      Кликни меня!
      
        Я элемент с изменяемыми стилями
      
    
  );
};

export default MyComponent;

В данном примере создается компонент, содержащий кнопку и элемент div. Когда пользователь нажимает на кнопку, вызывается функция handleClick, которая изменяет значение clicked в стейте с помощью функции setClicked. Затем используется условный оператор внутри атрибута style элемента div для динамического изменения его стилей в зависимости от значения clicked.

@velma 

Для даты активации элемента можно использовать className и дополнительный класс стилей. Вот пример того, как можно изменить код выше для даты активации элемента с помощью className:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

import React, { useState } from 'react';

const MyComponent = () => {
  const [clicked, setClicked] = useState(false);

  const handleClick = () => {
    setClicked(!clicked);
  };

  return (
    <div>
      <button onClick={handleClick}>Кликни меня!</button>
      <div className={clicked ? 'active' : ''}>Я элемент с изменяемыми стилями</div>
    </div>
  );
};

export default MyComponent;

В этом примере мы добавили класс 'active' к элементу div в зависимости от значения clicked, используя условный оператор внутри атрибута className. Затем вы можете определить стили для класса 'active' в файлах стилей вашего проекта.