一次操作禁用并重新启用按钮

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