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 に答える