Курсор стоит в указанном c текстовом вводе после ввода текста

Question

В моем приложении React Native, пока я заполняю пробелы в текстовых полях, все в порядке; Однако, когда я обрабатываю определенный c текстовый ввод (который описан ниже), когда я получил достаточно от ввода текста, я хочу оставить текстовый ввод, но он остановился, и приложение закончилось !! Проблема в том, что фактически я набираю текст в поле ввода текста, потому что если однажды я обрабатываю ввод текста без ввода, все в порядке !! пожалуйста, могу ли я найти решение этой проблемы

constructor(props){
    super(props);
    this.state = {
      evaluate       : "",
  };

}

validatorPass(text,type){

 const regexPass = /^(\w){3,16}$/
 let faible = " mot de passe faible ";
 let moyen = " mot de passe moyen ";
 let fort = " mot de passe fort "; 

 if (type=='password' && regexPass.test(text)=='true'){

    while (text.length<=4){
      this.setState({evaluate:faible});
    }
   }while(4<text.length<=8){
    this.setState({evaluate:moyen});
   }
   while(8<text.length<=16){
    this.setState({evaluate:fort});
   }

}

<View style={{display:'flex',flexDirection:'column',marginTop:20,
                              borderColor:'#d9d9d9',
                              borderWidth:1,width:280,marginLeft:40,height:60,zIndex:2}}>
                 <Text style={{width:105,top:-10,backgroundColor:'#ffffff',
                              paddingLeft:10,paddingRight:10,color:'#808080',
                              marginBottom:-10,marginLeft:20,zIndex:2}}>
                     Mot de passe
                 </Text>

        <Feather name={'lock'} size={24} style={{
                                               position:'absolute',
                                               marginLeft:15,
                                               marginTop:15,
                                               color:'#99ddff'}}/>    
          <View style={{height:40,marginHorizontal:40,marginBottom:50,marginRight:10}}>   
                <TextInput
                    onChangeText={(text)=>this.validatorPass(text,'password')}
                    secureTextEntry={this.state.secureTextEntry} 
                    style={{marginHorizontal:30,marginLeft:30,

                            paddingBottom:5}} placeholder='xxxxxxxxxxx'/>

                    {this.state.password   

                    ?

                    <TouchableOpacity 
                    onPress ={()=>
                    {this.ChangeState()}}>
                    <Entypo name='eye-with-line' size={20} style={{marginRight:25,left:200,top:-20}}/> 
                    </TouchableOpacity>
                    :
                    <TouchableOpacity onPress ={()=>
                    {this.ChangeState()}}>
                     <Entypo name='eye' size={20} style={{marginRight:25,left:200,top:-20}}/> 
                    </TouchableOpacity>}

          </View>


  </View>

Answer 1

В validatorPass() этот фрагмент вызывает бесконечное l oop, поскольку отсутствует условие прерывания

while (text.length<=4){
    this.setState({evaluate:faible});    
}

Более того, если я правильно понимаю, вместо if() должны быть операторы while()

if (type=='password' && regexPass.test(text)=='true'){

    if(text.length <= 4){
      this.setState({evaluate:faible});
    } else 
    if(text.length <= 8) {
      this.setState({evaluate:moyen});
    } else 
    if(text.length <= 16) {
      this.setState({evaluate:fort});
    }
}