Как сделать кнопку активной при нажатии в react.js?

@brooklyn 

В React.js для изменения состояния компонента, включая состояние кнопки, используется хук useState().

Чтобы сделать кнопку активной при нажатии, вам необходимо создать состояние для кнопки, определяющее, активна ли кнопка в данный момент. Затем, вы можете использовать обработчик событий onClick() для изменения состояния кнопки.

Вот пример кода:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

import React, { useState } from 'react';

function App() {
  const [isActive, setIsActive] = useState(false);

  function handleClick() {
    setIsActive(!isActive);
  }

  return (
    <div>
      <button onClick={handleClick}>{isActive ? 'Active' : 'Inactive'}</button>
    </div>
  );
}

export default App;

В этом примере мы создали состояние isActive с помощью хука useState(). По умолчанию кнопка неактивна, поэтому isActive установлено на false. Затем мы создали функцию handleClick, которая изменяет состояние кнопки при нажатии на нее с помощью функции setIsActive.

Наконец, мы используем обработчик событий onClick для кнопки, который вызывает функцию handleClick при нажатии на нее. Мы также используем тернарный оператор, чтобы изменять текст кнопки в зависимости от того, активна ли она или нет.

@brooklyn 

Вышеприведенный код делает кнопку активной при каждом нажатии на нее. Если вы хотите, чтобы кнопка оставалась активной после первого нажатия, вы можете изменить функцию handleClick следующим образом:

1
2
3

function handleClick() {
  setIsActive(true);
}

Это гарантирует, что кнопка будет активная после первого нажатия, и останется такой даже при последующих нажатиях.