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

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

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

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

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

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

от vladimir , 8 месяцев назад

@elissa 

В 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";

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

  const handleClick = () => {
    setIsClicked(!isClicked);
  };

  const className = isClicked ? "clicked" : "";

  return (
    
      
        Кнопка
      
    
  );
}

export default App;


В этом примере мы используем хук состояния useState, чтобы создать переменную isClicked, которая изначально имеет значение false. Мы также используем функцию setIsClicked для изменения значения isClicked на противоположное при клике на кнопку.


Затем мы создаем переменную className, которая равна "clicked", если isClicked равно true, и пустая строка в противном случае.


Наконец, мы применяем переменную className к кнопке, чтобы изменить класс при клике.