TouchableOpacity 버튼을 여러 번 클릭하지 못하도록하는 방법

Question

TouchableOpacity에 두 번 실행하지 않으려는 이벤트가 있습니다.

이벤트는 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 
} 

:

아래의 예를 참조하십시오