0

我需要在异步调用期间禁用和重新启用按钮。我只能禁用它。如果我添加代码以重新启用它会被忽略。我承认我可能没有问正确的问题。

我有一个带有“操作”按钮的功能：

<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)在此代码中的各个位置，并且该值使其显示在视图中并禁用该按钮。但是，我无法弄清楚如何在工作完成后重新启用该按钮。

4

1 回答 1

0

如果我对您的理解正确，您希望在异步期间和启用异步后禁用该按钮？如果是这种情况，无论您在哪里调用进行 api 调用的函数，您只需要链接 a.then(() => this.setState(isButtonDisabled: false)并且一旦从 api 调用收到响应，它将更新状态。另外，如果您不使用 es6，只需确保设置this为 api 调用上方的变量，以确保其范围适用于 setState

于 2016-09-09T15:53:32.160 回答