Блог

Главная - Вопросы по программированию - Отключить кнопку с помощью асинхронной функции

Отключить кнопку с помощью асинхронной функции

#javascript #reactjs #button #promise

#javascript #reactjs #кнопка #обещание

Вопрос:

В моем react.js компонент I визуализирует кнопку для создания PDF-файла

 <Button onClick={() => this.goCreatePdf()} variant="secondary" disabled={this.state.pdfLoading}>
   create PDF
</Button>

Кнопка вызывает асинхронную функцию, которая создает PDF-файл из предоставленных ему данных и возвращает обещание.

 goCreatePdf() {
  this.setState({ pdfLoading: true });
  const pdfFinished = createPdf(this.Data);
  pdfFinished.then((response) => {
      this.finishedCreatePdf();
  });
}

Когда PDF-файл завершен, вызывается другая функция для установки pdfLoading в false.

 finishedCreatePdf() {
  this.setState({ pdfLoading: false });
}

К сожалению, кнопка не отключает и не включает, как я хочу. Есть предложения?

Редактировать: я хочу, чтобы кнопка для отключения через обещание не была выполнена.

Комментарии:

1. «К сожалению, кнопка не отключается и не включается, как я хочу» — каково текущее поведение? Каково ожидаемое поведение?

2. Пожалуйста, создайте пример кода, чтобы мы могли помочь вам лучше.

3. Я хочу, чтобы кнопка для отключения через обещание ожидала.

4. @JanSchmidt Какую отладку вы выполнили? Ваш код выглядит нормально. Где именно это пошло не так? createPdf Работает слишком быстро, поэтому вы даже не видите мерцания кнопки?

5. @Bergi я добавил consol.log(loading begins) и consol.log(loading finished) непосредственно до this.setState({ pdfLoading: true}) и после this.setState({ pdfLoading: false}) . Похоже, это работает нормально. Просто кнопка все еще активна, пока я жду.

Ответ №1:

Ваш код выглядит хорошо. Вы внимательно проверили, не пропустили ли вы pdfLoading атрибут ввода state ?