[React Native -26] 버튼 활성화

 

필수항목을 다 입력했을 때, 버튼이 활성화 되도록 구현하겠다

//입력값 유효성 검사
onValueChange = (value) => {
    this.setState(value,()=>{
        let isValidForm = true;
        if (this.state.companyNo.trim().length < 10) { // 조건 필요시 추가
            isValidForm = false;
        }
        if (this.state.passwd.trim().length == 0) {
            isValidForm = false;
        }

        console.log("isValidForm", isValidForm);
        this.setState({ validForm: isValidForm });
    });
}

* id인 사업자 번호는 10자리수가 넘어야 함

*validForm이 true이면 활성화, false이면 비활성화

 

 

✔️setState함수

setState함수의 정의를 보면 2개의 인자가 존재한다

첫번 째 인자는 변경할  state변수 전달, 두번째 인자는 state변수가 변경 된 후, 실행되는 callback함수를 전달한다

 

 

사업자번호 입력

<View style={styles.textInput_view}>
    <Text>사업자번호</Text>
    <TextInput
        ref={(c) => { this.idRef = c; }}
        returnKeyType="next"
        onSubmitEditing={() => { this.passwordRef.focus(); }}
        onChangeText={(value) => {this.onValueChange({ companyNo: value });}}
        value={this.state.companyNo}
    />
</View>

비밀번호 입력

<View style={styles.textInput_view}>
    <Text>비밀번호</Text>
    <TextInput
        ref={(c) => { this.passwordRef = c; }}
        returnKeyType="next"
        onChangeText={(value) => this.onValueChange({passwd:value})}
        secureTextEntry={true}
        value={this.state.passwd}
    />
</View>

 

 

등록 버튼

 {/* 상품 등록하기 버튼 부분*/}
{this.state.validForm ?
    (<TouchableOpacity activeOpacity={0.8} style={[styles.default_btn, styles.enable_login_btn]} onPress={this.loginButtonClicked}>
        <Text style={[styles.default_text, styles.login_btn_text]}>로그인</Text>
    </TouchableOpacity>)
    : (<TouchableOpacity activeOpacity={0.8} style={[styles.default_btn, styles.disable_login_btn]}>
        <Text style={[styles.default_text, styles.login_btn_text]}>로그인</Text>
    </TouchableOpacity>)}