一次操作禁用並重新啟用按鈕

Question

我需要在異步調用期間禁用並重新啟用按鈕。 我只能將其禁用。 如果添加代碼以重新啟用它，則將被忽略。 我承認我可能沒有問正確的問題。

我有一個帶有按鈕“動作”的功能：

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

這被React類稱為“ Actions”：

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

這被另一個React類“ 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

如果我對您的理解正確，那么是否希望在異步過程中以及啟用異步后禁用按鈕？ 如果是這種情況，無論您在哪里調用進行api調用的函數，您.then(() => this.setState(isButtonDisabled: false)需要鏈接.then(() => this.setState(isButtonDisabled: false) ，它將在響應發生后立即更新狀態從API調用已收到。如果你還沒有使用ES6只要確保設置this API調用高於變量，以確保其正常范圍的對的setState