Блокировка кнопки на время выполнения функции?

В React, блокировка кнопки на время выполнения функции может быть реализована несколькими способами. Один из наиболее распространенных способов - это использование локального состояния компонента для хранения информации о блокировке кнопки.

Примерно следующий паттерн можно использовать для решения этой задачи:

1. Создайте локальное состояние в компоненте для хранения информации о том, заблокирована ли кнопка. Например, можно использовать useState хук:

import React, { useState } from 'react';

const MyComponent = () => {
  const [isButtonDisabled, setIsButtonDisabled] = useState(false);

  const handleClick = () => {
    setIsButtonDisabled(true);

    // Здесь можно добавить асинхронную функцию или любую другую длительную операцию

    // Пример асинхронной операции (setTimeout в данном случае)
    setTimeout(() => {
      // После завершения операции снова разблокируем кнопку
      setIsButtonDisabled(false);
    }, 2000); // Пример времени блокировки в 2 секунды
  };

  return (
    <div>
      <button onClick={handleClick} disabled={isButtonDisabled}>
        Моя кнопка
      </button>
    </div>
  );
};

2. В приведенном выше примере, мы используем isButtonDisabled, чтобы условно блокировать кнопку в зависимости от значения этого состояния. При клике на кнопку мы устанавливаем isButtonDisabled в значение true, чтобы заблокировать кнопку, а затем запускаем операцию, которая будет блокировать кнопку на определенное время. После завершения операции мы снова устанавливаем isButtonDisabled в значение false, чтобы разблокировать кнопку.

3. Обратите внимание, что в реальном приложении операция, которая блокирует кнопку, может быть любой операцией (например, отправка запроса на сервер или выполнение сложных вычислений). Убедитесь, что разблокировка кнопки происходит после завершения этой операции.

Это общий пример того, как можно реализовать блокировку кнопки на время выполнения функции в React. Конечно, существует множество вариантов реализации этой функциональности в зависимости от конкретных требований вашего проекта.