>source

여기에서는 OTP code 확인이 있으며 각 숫자에 대해 4 개의 TextInputs가 있습니다.

            <TextInput
                    maxLength={1}
                    keyboardType='numeric'
                    ref={"pin1ref"}
                    onBlur={()=> this.onBlur()}
                    onFocus={()=> this.onFocus()}
                        style={{
                            backgroundColor: 'white',
                            fontWeight: '600',
                            alignSelf: 'center',
                            padding: normalize(10),
                            fontSize: normalize(34),
                            height: normalize(72),
                            width: normalize(72),
                            borderRadius: 20,
                            borderWidth: 1,
                            borderColor: '#D0DBEA',
                            textAlign: 'center'}}
                    onChangeText={(pin1)=> {
                        this.setState({ pin1: pin1 })
                        if (pin1 != "") {
                            this.refs.pin2ref.focus()
                        }
                    }}
                    value={pin1}
                />                    <TextInput
                    onBlur={()=> this.onBlur()}
                    onFocus={()=> this.onFocus()}
                    maxLength={1}
                    keyboardType='numeric'
                    ref={"pin2ref"}
                        style={styles.Input}
                    onChangeText={(pin2)=> {
                        this.setState({ pin2: pin2 })
                        if (pin2 != "") {
                            this.refs.pin3ref.focus()
                        }
                    }}
                    value={pin2}
                />                <TextInput
                    maxLength={1}
                    keyboardType='numeric'
                    ref={"pin3ref"}
                    onChangeText={(pin3)=> {
                        this.setState({ pin3: pin3 })
                        if (pin3 != "") {
                            this.refs.pin4ref.focus()
                        }
                    }}
                    value={pin3}
                    style={styles.Input}
                />                <TextInput
                    maxLength={1}
                    keyboardType='numeric'
                    ref={"pin4ref"}
                    onChangeText={(pin4)=> this.setState({ pin4: pin4 })}
                    value={pin4}
                    style={styles.Input}
                    />

다른 클래스에서 임의의 검증 code를 전달했고 여기에서 얻을 수 있습니다.

export default class InputOTPScreen extends Component {
    componentDidMount() {
        this._unsubscribe= this.props.navigation.addListener('focus', ()=> {
            var code= this.props.route.params.verifyCode;
            if (this.state.verifyCode != code) {
                this.setState({ verifyCode: code });
            }
        });
        console.log("verifycode:", this.state.verifyCode)
    }
    componentWillUnmount() {
        this._unsubscribe();
    }
    constructor(props) {
        super(props)
        var code= this.props.route.params.verifyCode;
        this.state= {
            pin1: "",
            pin2: "",
            pin3: "",
            pin4: "",
            codeActivationFromClient: '',
            verifyCode: code
        }
    }
}

그래서 모든 textInputs 값을 하나의 모든 textInputs 값을 합치하려고 시도한 다음 실제 code를 보낸 실제 code로 verifiy하려고했습니다.

verify() {
        this.setState({ codeActivationFromClient: this.state.pin1 + this.state.pin2 + this.state.pin3 + this.state.pin4 })
        console.log("codeActivationFromClient : ", this.state.codeActivationFromClient)
        if (this.state.verifyCode== this.state.codeActivationFromClient) {
            console.log("code correct !")
        }
        else {
            console.log("Verify code is not correct!");
        }
    }
}

문제는 첫 번째 code가 올바른 시점에 있지만 제대로 작동하지 않습니다 (내 로그 콘솔에 빈 code가 나타납니다) 잘못된 code의 오류 메시지가 표시되지만 두 번째 시도에서 작동합니다 ( 로그 콘솔에서 code를 볼 수 있습니다) 이것을위한 해결책이 있습니까?

콜백에 SetState 다음에 code를 추가하십시오. 이와 같은 것 .SetState ({....}, ()=>{setState} 여기에 code를 추가하십시오}

Lakshya2021-05-11 17:11:36
  • 이전 JavaScript에서 객체를 HTML DOM으로 인쇄합니다
  • 다음 checkbox : Oracle Apex 체크 박스