TouchableOpacityボタンを複数回クリックしないようにする方法

Question

私はTouchableOpacityには2回実行したくないイベントがあります。

onPressイベントにはboolが入っていましたが、設定状態が非同期で、複数回ボタンを押すことができますので、これは機能しません。

私もタイマーを設定しようとしましたが、これも私にとっては役に立ちません。

複数のボタンを押すのを防ぐ他の方法はありますか（他の類似のコンポーネントなど）？

Answer 1

setStateには、UIの変更に応じて反映されない値を格納する必要はありません。

TouchableOpacityのクリックで設定したReact Classの中にthis.state.flagの代わりにthis.flagを直接持つことができます。したがって、this.flagをレンダリングサイクルを含む非同期操作なしに設定することができます。それはちょうどあなたのコンポーネントが保持するフラグになります。

class SomeComponent extends React.Component{ 
    constructor() { 
    super(); 
    this.state = { ... }; // this does not need to store our flag 
    this.touchableInactive = false; // this is not state variable. hence sync 
    } 

    onButtonClick() { 
    if (!this.touchableInactive) { 
     this.touchableInactive = true; 
     // do stuff 
    } 
    } 

     // similarly reset this.touchableInactive to false somewhere else 
} 

：

以下の例を参照してください。