Отключить и снова включить кнопку при однократном действии

Question

Мне нужно отключить и снова включить кнопку во время асинхронного вызова. Я могу отключить его. Если я добавлю код для повторного включения, он будет проигнорирован. Я признаю, что не могу задать правильный вопрос.

У меня есть функция с кнопкой "Action":

<button className={`doFoo${buttonClasses[type]} ${type}`} onClick={onClick} disabled={isButtonDisabled}> 

Это называется по React класса "Действия":

<Action type="like" onClick={onLike} isButtonDisabled={isButtonDisabled} /> 

Это называется другим Реагировать класса "List" :

<Actions onLike={this.handleLike} onDislike={this.handleDislike} isButtonDisabled={isButtonDisabled}/> 

Кроме того, в этом классе являются следующие функции:

... 
thumbsUp() { 
    const { 
     ... 
    } = this.props; 
    const { 
     ... 
    } = this.state; 

    this.setState({ wasLiked: true, viewProfile: false },() => { 
     setTimeout(doThumbsUp, ACTION_CONFIRMATION_ANIMATION_TIMEOUT); 
    }); 

    function doThumbsUp() { 
     thumbsUp({ 
     index: activeIndex, 
     id: profiles[activeIndex].id 
     }); 
    } 
    }, 

    handleLike() { 
    const { showThumbsUpConfirmation } = this.props; 

    if (showThumbsUpConfirmation) { 
     this.showThumbsUpConfirmationModal(); 
    } else { 
     this.thumbsUp(); 
    } 
    }, 
... 

Вот что источник выглядит следующим образом:

export function thumbsUp({ id, ... }) { 
    return api.post(`${API.ENDPOINTS.FOO}/${id}/thumbs_up`, { 
    ... 
    }); 
} 

я могу разместить this.setState(isButtonDisabled: true) в различных местах в этом коде, и это значение делает его к представлению и отключает кнопку. Однако я не могу понять, как снова включить кнопку после выполнения работы.

Answer 1

Если я правильно понимаю вас, вы хотите, чтобы кнопка была отключена во время асинхронизации и после активации async? Если это так, везде, где вы вызываете функцию, которая выполняет вызов api, вам просто нужно связать .then(() => this.setState(isButtonDisabled: false) и обновить состояние, как только будет получен ответ от вызова api. также, если вы не используете es6, просто убедитесь, что вы установили this в переменную выше вызова api, чтобы обеспечить ее правильную привязку для setState