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

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

от elissa , в категории: JavaScript , год назад

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

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

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

от vladimir , год назад

@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 к кнопке, чтобы изменить класс при клике.

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

от dorothea_stoltenberg , 4 месяца назад

@elissa 

Надеюсь, что данная информация полезна. Если у вас есть другие вопросы, не стесняйтесь задавать!