@D_K_D
Чайник

Нужно изменить классовый компонент так чтоб он заработал?

Есть фича для сайта при нажатие на кнопку она должна отключиться на 60 секунд а по окончание времени снова работать. Не сильно разбираюсь в компонентах сама фича изначально была написано на функциональном компоненте а мне нужно переписать её на классовый компонент .
Вот мой классовый компонент:
import React, {useState , Component} from "react";

class Example extends React.Component {
  constructor() {
    super();
    this.state = { 
     isTimerActive : false,
     setIsTimerActive : false,
     my: "Смс отпрвлено"
    };
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setIsTimerActive = true;
    setTimeout(()=> {
      this.setIsTimerActive = false;
    } , 60000);
  }

  render() {
    return(
      <button disabled={this.isTimerActive} onClick={this.handleClick}>
      {this.isTimerActive ? {my} : 'Повторно отправить смс'}
      </button>
    );
  }
}
export default Example;


Вот код который работает , но он написан на функциональном компоненте:
import React , {useState} from "react";
const App = () => {
  const [isTimerActive, setIsTimerActive] = useState(false);
  const my = ''
  const handleClick = () => {
    // активируем счетчик
    setIsTimerActive(true);
    setTimeout(() => {
      // сбрасываем
      setIsTimerActive(false);
    }, 10000);
  };

  return (
    <button disabled={isTimerActive} onClick={handleClick}>
      {isTimerActive ? my : 'Повторно отправить смс'}
    </button>
  );
};
export default App;
  • Вопрос задан
  • 61 просмотр
Решения вопроса 1
0xD34F
@0xD34F Куратор тега JavaScript
class App extends React.Component {
  state = { 
    isTimerActive: false,
  }

  setTimerActive = isTimerActive => {
    this.setState(() => ({ isTimerActive }));
  }

  onClick = () => {
    this.setTimerActive(true);
    setTimeout(this.setTimerActive, 60000, false);
  }

  render() {
    const { isTimerActive } = this.state;

    return(
      <button disabled={isTimerActive} onClick={this.onClick}>
        {isTimerActive ? 'отправлено' : 'отправить повторно'}
      </button>
    );
  }
}
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы