[React-Native] 유효성 검사 후 포커스 이동 ( class component )

함수형 자료가 너무 많은데에 비해 class형은 자료가 많이 없어서 헤맷다 ... 이러한 삽질은 좋지 않으므로 포스팅 해야징

 

✅ UseRef를 class형에서 쓰는 방법 ( 출처 - stack overflow )

this.myRef = React.createRef();

요렇게 React.UseRef를 사용하면 된다

비전 카메라 구현했을 때도 이렇게 했는데... 제대로 알고 쓰지 않으면 이렇게 되는 것이다... 뭐든지 제대로 해야함!!

 

 

✅ 적용코드

constructor(props) {
        super(props);
        this.nameRef = React.createRef();
}

handleModal = () => { 
        const { name ,number,price }  = this.state ;
        if (name == ""){
            this.nameRef.focus();
            Alert.alert("입력 항목을 확인해주세요");
            return false;
        }
}

 <TextInput style={template.textInput}
          ref = {(c) => {this.nameRef = c;}}
          onChangeText={name => this.onEnterName(name)}
          placeholder="품명을 입력하세요."
 />

상품등록 버튼을 눌렀을 때 textInput이 비었을 경우 경고 메세지와 함께 focus를 해당하는 항목으로 이동되게 구현하였다.