[React-Native] 버튼 활성화/비활성화

TextInput에 모든 값이 입력되지 않았을 경우에 버튼을 비활성화

TextInput에 모든 값이 입력되었을 경우엔 버튼을 활성화 시켜보았습니다.

---

글자 수 제한을 구현했을 때 사용했던 삼항연산자를 사용하여 처리해주었습니다. 

삼항연산자에 대해 자세한 설명이 필요하시면 요 포스팅을 보시면 됩니다

[React-Native] <Text> 글자 수 제한하기

 

✅ 삼항연산자 사용

 {/* 상품 등록하기 버튼 부분*/}
 {this.state.number.trim() != 0 && this.state.name.trim() != 0 && this.state.price.trim() != 0 && this.state.hashTag.length != 0 ?
     (<TouchableOpacity activeOpacity={0.8} style={styles.okbtn} onPress={this.validateModal}>
           <Text style={styles.btn_text}>상품등록하기</Text>
     </TouchableOpacity>)
     : (<TouchableOpacity activeOpacity={0.8} style={styles.btn}>
          <Text style={styles.btn_text}>상품등록하기</Text>
     </TouchableOpacity>)}

&&연산자를 사용하여 품명, 부품번호, 가격이 공백이 아니거나 hashTag는 배열이므로 length가 0이 아닐 때 활성화 된 상품등록 버튼을 보여지게 하고 공백이 하나라도 있을 경우 비활성화 된 버튼이 보여지게 됩니다.

 

✅ 버튼 CSS

//상품등록하기 버튼
  btn: {//비활성화 버튼
    height: 50,
    backgroundColor: "#C9CCD1",
    alignItems: 'center',
    justifyContent: 'center'
  },
  okbtn: { //활성화 버튼
    height: 50,
    backgroundColor: "#1E90FF",
    alignItems: 'center',
    justifyContent: 'center'
  },