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

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

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

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

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

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

от jerrold_langworth , 6 месяцев назад

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