Question

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

我有一个带按钮的功能＆＃34;动作＆＃34;：

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

这是由React类＆＃34; Actions＆＃34;：

调用的

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

由另一个React类＆＃34; List＆＃34;：

调用

<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)，一旦从api调用收到响应，它就会更新状态。另外，如果您不使用es6，请确保将this设置为api调用之上的变量，以确保其适用于setState

单个操作上禁用并重新启用按钮

1 个答案: