Как при клике применить класс в react.js?

@francis_schuster 

В React.js при клике на элемент можно применить класс следующим образом:

1. Определите состояние компонента, которое будет отслеживать, должен ли элемент иметь класс при клике:

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

import { useState } from 'react';

function MyComponent() {
  const [active, setActive] = useState(false);

  function handleClick() {
    setActive(!active);
  }

  return (
    <div
      className={active ? 'active' : ''}
      onClick={handleClick}
    >
      Click me
    </div>
  );
}

1. Обновите состояние active в функции handleClick, чтобы переключать между true и false.
2. Установите onClick обработчик для элемента, который вызовет функцию handleClick, когда элемент будет нажат.
3. Используйте тернарный оператор, чтобы добавить класс "active", если active равен true, и оставить класс пустым в противном случае.

В этом примере при клике на элемент <div> состояние active переключается между true и false, а класс active добавляется или удаляется из элемента в зависимости от состояния active.

@francis_schuster 

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

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

import React, { useState } from 'react';
import './MyComponent.css'; // Подключаем стили

function MyComponent() {
  const [active, setActive] = useState(false);

  function handleClick() {
    setActive(!active);
  }

  return (
    <div
      className={active ? 'active' : ''}
      onClick={handleClick}
    >
      Click me
    </div>
  );
}

export default MyComponent;

В файле MyComponent.css определите стили для класса 'active':

1
2
3
4

.active {
  background-color: blue;
  color: white;
}

В этом примере при клике на элемент будет происходить переключение между состояниями true и false для переменной active. При активном состоянии класс 'active' будет применяться к элементу, что приведет к применению стилей, указанных в файле MyComponent.css.