How to identify the size (lenght) of the text with a state

Question

How to identify the size (lenght) of the text with a state

Navigation

#1 by (1 votes)
#2 by (1 votes)

1

I was trying to do a CPF validation, with a quantity to be entered equal to 11, otherwise a message would appear and the text would be erased.

The problem is how to identify the number of lines being typed; I have been trying for a while, as I am new to programming I do not know how to use my logic ...

Follow the code:

import React from 'react'
import { StyleSheet, View,Alert,Button } from 'react-native'

import { TextInputMask } from 'react-native-masked-text'
import { Kaede } from 'react-native-textinput-effects'

export default class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      cpf: '',
      myNumber:'',
      myValid:''
    }
  }

  onChange(text) {
    let newText = '';
    let numbers = '0123456789';

    for (var i = 0; i < text.length; i++) {
      if ( numbers.indexOf(text[i]) > -1 ) {
        newText = newText + text[i];
      }
    }

    this.setState({myNumber: newText})
  }

  onPress(text){
    let newText = '';

    if( this.state.cpf.length == 11){
      Alert.alert('Valido!!')
    } else {
      Alert.alert('inválido...')
      this.setState({myNumber:newText})
    }
  }

  render() {

    return (
      <View style={styles.container}>
        <TextInputMask
          refInput={(ref) => this.myDateText = ref }

          // here we set the custom component and their props.
          customTextInput={Kaede}
          customTextInputProps={{
            style:{ width: '80%' },
            label:'CPF'
          }}
          maxLength={14}
          type={'datetime'}
          options={{
            format: '999.999.999-99'
          }}
          onChangeText={ cpf => this.setState({ cpf }),(text)=> this.onChange(text) }
          value={this.state.cpf,this.state.myNumber,this.state.myValid} 
        />

        <Button
          onPress={(text)=> this.onPress(text)}
          title="Validar"
          color="#841584"
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center'
    }
})

PS: Sorry for the bad formatting ...

input react-native text

asked by anonymous 05.12.2018 / 17:34

2 answers

1

If you want to set a regex to validate cpf, I made an example using the following pattern:

xxx.xxx.xxx-xx

class App extends React.Component {
state = {
  cpf: null,
  validation: ""
}

onTextChange = (e) => {
  const cpf = e.target.value;

  if(cpf.match(/[0-9]{3}\.[0-9]{3}\.[0-9]{3}-[0-9]{2}/)) {
    this.setState({cpf, validation: "Valid cpf"})
  }
  else {
    this.setState({cpf, validation: "Invalid cpf format"})
  }
}

render() {
 return (
   <div>
     <input type="text" onChange={this.onTextChange} />
     {this.state.validation ? <p>{this.state.validation}</p> : null }
   </div>
 )
}

}


ReactDOM.render(<App />, document.getElementById("app"));

If cpf is in the defined format, the message "Valid Cpf" will be displayed.

08.12.2018 / 14:54

Beautiful Soup - Remove a tag while keeping Text Convert Java object to JSON with Gson (generating with backslash)

score 1 · Accepted Answer

The best way is inside your TextInput you add an onSubmitEditing event

Example:

onSubmitEditing={() => { this.checkCPF(); }}

That is, the onSubmitEditing will be called when you finish typing the CPF in the field. So you call the check function.

checkCPF() {
    const { cpf } = this.state;
    if (cpf.length == 11) 
        Alert.alert('Valido!!')
    else
        Alert.alert('Invalido!!')
}