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

I need to disable and re-enable a button during the async call. I am only able to disable it. If I add code to re-enable it is ignored. I acknowledge I may not be asking the right question.

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

I have a function with a button "Action":

我有一个带有“Action”按钮的功能:

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

That is called by a React class "Actions":

这是由React类“Actions”调用的:

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

That is called by another React class "List":

这是由另一个React类“List”调用的:

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

Also in that class is are the following functions:

同样在该类中还有以下功能:

...
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();
    }
  },
...

Here's what the source looks like:

以下是源代码:

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

I can place this.setState(isButtonDisabled: true) at various places in this code and that value makes it to the view and disables the button. However I cannot figure out how to re-enable the button after the work has been done.

我可以将this.setState(isButtonDisabled:true)放在此代码中的不同位置,该值使其进入视图并禁用按钮。但是,在完成工作后,我无法弄清楚如何重新启用按钮。

1 个解决方案

#1

If I'm understanding you correctly you want the button to be disabled during async and after async be enabled? If that is the case, wherever you are calling the function that makes the api call, you just need to chain a .then(() => this.setState(isButtonDisabled: false) and that will update the state as soon as response has been received from api call. also if you aren't using es6 just make sure to set this to a variable above the api call to ensure its scoped properly for setState

如果我正确理解您,您希望在异步期间和启用异步后禁用该按钮?如果是这种情况,无论你在何处调用进行api调用的函数,你只需要链接一个.then(()=> this.setState(isButtonDisabled:false),并且只要响应有效就会更新状态从api调用收到。如果你没有使用es6,请确保将其设置为api调用之上的变量,以确保其适当地用于setState