Хотите повысить интерактивность вашего приложения React, добавив активный класс к кнопке при ее нажатии? В этой статье мы рассмотрим несколько методов, позволяющих добиться такого эффекта. Мы предоставим понятные объяснения и примеры кода, используя разговорный язык. Итак, приступим!

Метод 1: использование перехватчиков состояния
Один популярный подход — использовать перехватчики состояния React для отслеживания активного состояния кнопки. Вот пример:

import React, { useState } from 'react';
function MyButton() {
  const [isActive, setIsActive] = useState(false);
  const handleClick = () => {
    setIsActive(!isActive);
  };
  return (
    <button
      className={isActive ? 'active' : ''}
      onClick={handleClick}
    >
      Click Me
    </button>
  );
}

Метод 2: использование компонентов класса
Если вы используете компоненты класса вместо функциональных компонентов, вы можете добиться того же результата, используя состояние компонента. Вот пример:

import React, { Component } from 'react';
class MyButton extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isActive: false,
    };
  }
  handleClick = () => {
    this.setState((prevState) => ({
      isActive: !prevState.isActive,
    }));
  };
  render() {
    const { isActive } = this.state;
    return (
      <button
        className={isActive ? 'active' : ''}
        onClick={this.handleClick}
      >
        Click Me
      </button>
    );
  }
}

Метод 3. Использование библиотеки имен классов.
Другой подход предполагает использование библиотеки имен классов, например classnames, которая упрощает процесс условного применения классов. Вот пример:

$ npm install classnames

import React, { useState } from 'react';
import classNames from 'classnames';
function MyButton() {
  const [isActive, setIsActive] = useState(false);
  const handleClick = () => {
    setIsActive(!isActive);
  };
  const buttonClassName = classNames({
    active: isActive,
  });
  return (
    <button
      className={buttonClassName}
      onClick={handleClick}
    >
      Click Me
    </button>
  );
}

Метод 4: использование модулей CSS
Модули CSS — еще один мощный метод управления именами классов в React. Это позволяет вам локально привязывать стили к компоненту. Вот пример:

/* Button.module.css */
.active {
  /* Your active styles here */
}

import React, { useState } from 'react';
import styles from './Button.module.css';
function MyButton() {
  const [isActive, setIsActive] = useState(false);
  const handleClick = () => {
    setIsActive(!isActive);
  };
  const buttonClassName = `${styles.button} ${isActive ? styles.active : ''}`;
  return (
    <button
      className={buttonClassName}
      onClick={handleClick}
    >
      Click Me
    </button>
  );
}

Метод 5: использование библиотек CSS-in-JS
Библиотеки CSS-in-JS, такие как styled-comments или Emotion, предоставляют удобный способ определения стилей, встроенных в ваши компоненты. Вот пример использования стилевых компонентов:

import React, { useState } from 'react';
import styled from 'styled-components';
const StyledButton = styled.button`
  /* Your button styles here */
  &.active {
    /* Your active styles here */
  }
`;
function MyButton() {
  const [isActive, setIsActive] = useState(false);
  const handleClick = () => {
    setIsActive(!isActive);
  };
  return (
    <StyledButton
      className={isActive ? 'active' : ''}
      onClick={handleClick}
    >
      Click Me
    </StyledButton>
  );
}

Метод 6: Управление встроенными стилями
Вы также можете напрямую манипулировать встроенным атрибутом styleэлемента кнопки, чтобы добавлять или удалять стили. Вот пример:

import React, { useState } from 'react';
function MyButton() {
  const [isActive, setIsActive] = useState(false);
  const handleClick = () => {
    setIsActive(!isActive);
  };
  const buttonStyle = {
    /* Your button styles here */
    ...(isActive && { /* Your active styles here */ }),
  };
  return (
    <button
      style={buttonStyle}
      onClick={handleClick}
    >
      Click Me
    </button>
  );
}

Метод 7: использование сторонней библиотеки управления состоянием
Если вы используете библиотеку управления состоянием, например Redux или MobX, вы можете использовать их возможности для обработки активного состояния кнопки. Этот подход особенно полезен для крупномасштабных приложений. Вот пример использования Redux:

$ npm install redux react-redux

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { toggleButtonActive } from './actions';
function MyButton() {
  const isActive = useSelector((state) => state.button.isActive);
  const dispatch = useDispatch();
  const handleClick = () => {
    dispatch(toggleButtonActive());
  };
  return (
    <button
      className={isActive ? 'active' : ''}
      onClick={handleClick}
    >
      Click Me
    </button>
  );
}

Это всего лишь несколько способов добавить активный класс к кнопке onClick в React. Выберите тот, который лучше всего соответствует требованиям вашего проекта и стилю кодирования.