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

Пользователь

от francis_schuster , в категории: JavaScript , 7 месяцев назад

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

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

Пользователь

от camren , 7 месяцев назад

@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.