React Native TextInput que aceita apenas caracteres numéricos

Preciso ter um TextInputcomponente React Native que só permitirá a inserção de caracteres numéricos (0 - 9). Posso definir o keyboardTypepara o numericqual quase me leva lá para entrada, exceto para o ponto (.). No entanto, isso não impede a colagem de caracteres não numéricos no campo.

O que descobri até agora é usar o OnChangeTextevento para ver o texto inserido. Eu removo todos os caracteres não numéricos do texto. Em seguida, coloque o texto em um campo de estado. Em seguida, atualize o TextInputpor meio de sua Valuepropriedade. Snippet de código abaixo.

<TextInput 
  style={styles.textInput}
  keyboardType = 'numeric'
  onChangeText = {(text)=> this.onChanged(text)}
  value = {this.state.myNumber}
/> 

onTextChanged(text) {
  // code to remove non-numeric characters from text
  this.setState({myNumber: text})
}

Isso parece funcionar, mas parece um hack. Há outra maneira de fazer isso?

Essa é a maneira correta de fazer isso até que tal componente (ou atributo no TextInput) seja especificamente desenvolvido.

A web tem o tipo 'número' para o elemento de entrada, mas é baseado na web e o react-native não usa uma visualização da web.

Você pode considerar a criação dessa entrada como um componente de reação por conta própria (talvez chame NumberInput): isso permitirá que você a reutilize ou talvez até mesmo abra o código-fonte, pois você pode criar muitas TextInputs com diferentes filtros / verificadores de valor.

A desvantagem da correção imediata é garantir que o feedback correto seja dado ao usuário para evitar confusão quanto ao que aconteceu com seu valor

Usar um RegExp para substituir qualquer não dígito é mais rápido do que usar um loop for com uma lista de permissões, como fazem outras respostas.

Use para o seu gerenciador onTextChange:

onChanged (text) {
    this.setState({
        mobile: text.replace(/[^0-9]/g, ''),
    });
}

Teste de desempenho aqui: https://jsperf.com/removing-non-digit-characters-from-a-string

Você pode fazer assim. Ele só aceitará valores numéricos e terá um limite de 10 números conforme sua preferência.

<TextInput 
   style={styles.textInput}
   keyboardType='numeric'
   onChangeText={(text)=> this.onChanged(text)}
   value={this.state.myNumber}
   maxLength={10}  //setting limit of input
/>

Você pode ver o valor inserido escrevendo o seguinte código em sua página:

{this.state.myNumber}

Na função onChanged (), o código se parece com este:

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

    for (var i=0; i < text.length; i++) {
        if(numbers.indexOf(text[i]) > -1 ) {
            newText = newText + text[i];
        }
        else {
            // your call back function
            alert("please enter numbers only");
        }
    }
    this.setState({ myNumber: newText });
}

Espero que isso seja útil para outros.

React Native TextInput fornece adereços keyboardType com os seguintes valores possíveis: teclado numérico padrão teclado decimal numérico endereço de e-mail teclado numérico

então, para o seu caso, você pode usar keyboardType = 'number-pad' para aceitar apenas números. Isso não inclui '.'

então,

<TextInput 
  style={styles.textInput}
  keyboardType = 'number-pad'
  onChangeText = {(text)=> this.onChanged(text)}
  value = {this.state.myNumber}
/>

é o que você deve usar no seu caso.

para obter mais detalhes, consulte o link do documento oficial para TextInput: https://facebook.github.io/react-native/docs/textinput#keyboardtype

Função para validar a entrada:

validateInputs(text, type) {
let numreg = /^[0-9]+$/;
  if (type == 'username') {
    if (numreg.test(text)) {
      //test ok
    } else {
      //test not ok
    } 
  }
}



<TextInput
   onChangeText={text => this.validateInputs(text, 'username')}
/>

Espero que isto seja útil.

Permitir apenas números usando uma expressão regular

<TextInput 
  keyboardType = 'numeric'
  onChangeText = {(e)=> this.onTextChanged(e)}
  value = {this.state.myNumber}
/> 

onTextChanged(e) {
  if (/^\d+$/.test(e.toString())) { 
    this.setState({ myNumber: e });
  }
}

Você pode querer ter mais de uma validação

<TextInput 
  keyboardType = 'numeric'
  onChangeText = {(e)=> this.validations(e)}
  value = {this.state.myNumber}
/> 

numbersOnly(e) {
    return /^\d+$/.test(e.toString()) ? true : false
}

notZero(e) {
    return /0/.test(parseInt(e)) ? false : true
}

validations(e) {
    return this.notZero(e) && this.numbersOnly(e)
        ? this.setState({ numColumns: parseInt(e) })
        : false
}

Primeira Solução

Você pode usar keyboardType = 'numeric'para teclado numérico.

  <View style={styles.container}>
        <Text style={styles.textStyle}>Enter Number</Text>
        <TextInput
          placeholder={'Enter number here'}
          style={styles.paragraph}
          keyboardType="numeric"
          onChangeText={value => this.onTextChanged(value)}
          value={this.state.number}
        />
      </View>

No primeiro caso, são incluídos sinais de pontuação, por exemplo: - . e -

Segunda Solução

Use expressões regulares para remover sinais de pontuação.

 onTextChanged(value) {
    // code to remove non-numeric characters from text
    this.setState({ number: value.replace(/[- #*;,.<>\{\}\[\]\\\/]/gi, '') });
  }

Por favor, verifique o link do lanche

https://snack.expo.io/@vishal7008/numeric-keyboard

Um lembrete gentil para aqueles que encontraram o problema de que "onChangeText" não pode alterar o valor TextInput como esperado no iOS: isso é na verdade um bug no ReactNative e foi corrigido na versão 0.57.1. Consulte: https://github.com/facebook/react-native/issues/18874

<TextInput autoCapitalize={'none'} maxLength={10} placeholder='Mobile Number'  value={this.state.mobile} onChangeText={(mobile) => this.onChanged(mobile)}/>

e método onChanged:

onChanged(text){
   var newText = '';
   var numbers = '0123456789';
   if(text.length < 1){
     this.setState({ mobile: '' });
   }
   for (var i=0; i < text.length; i++) {
        if(numbers.indexOf(text[i]) > -1 ) {
             newText = newText + text[i];
        }
        this.setState({ mobile: newText });
    }
}

Tive o mesmo problema no iOS, usando o evento onChangeText para atualizar o valor do texto digitado pelo usuário, não estava conseguindo atualizar o valor do TextInput, então o usuário ainda veria os caracteres não numéricos que digitou.

Isso ocorria porque, quando um caractere não numérico fosse pressionado, o estado não mudaria, pois this.setState estaria usando o mesmo número (o número que permanecia após a remoção dos caracteres não numéricos) e então TextInput não seria renderizado novamente.

A única maneira que encontrei de resolver isso foi usar o evento keyPress que acontece antes do evento onChangeText, e nele, usar setState para alterar o valor do estado para outro, completamente diferente, forçando a renderização novamente quando o evento onChangeText foi chamado . Não muito feliz com isso, mas funcionou.

if (!/^[0-9]+$/.test('123456askm')) {
  consol.log('Enter Only Number');
} else {
    consol.log('Sucess');
}

Eu escrevi esta função que achei útil para evitar que o usuário seja capaz de inserir qualquer coisa diferente da que eu estava disposto a aceitar. Eu também usei keyboardType="decimal-pad"e meuonChangeText={this.decimalTextChange}

  decimalTextChange = (distance) =>
{
    let decimalRegEx = new RegExp(/^\d*\.?\d*$/)
    if (distance.length === 0 || distance === "." || distance[distance.length - 1] === "."
        && decimalRegEx.test(distance)
    ) {
        this.setState({ distance })
    } else {
        const distanceRegEx = new RegExp(/^\s*-?(\d+(\.\d{ 1, 2 })?|\.\d{ 1, 2 })\s*$/)
        if (distanceRegEx.test(distance)) this.setState({ distance })
    }
}

O primeiro ifbloco é o tratamento de erros para o evento em que o usuário exclui todo o texto, ou usa um ponto decimal como o primeiro caractere, ou se tentar colocar mais de uma casa decimal, o segundo ifbloco garante que eles podem digitar como muitos números que quiserem antes da casa decimal, mas apenas até duas casas decimais depois da vírgula.

Usando um RegExp para substituir qualquer não dígito. Tome cuidado para que o próximo código forneça o primeiro dígito que ele encontrou, portanto, se o usuário colar um parágrafo com mais de um número (xx.xx), o código fornecerá o primeiro número. Isso ajudará se você quiser algo como preço, não um telefone celular.

Use para o seu gerenciador onTextChange:

onChanged (text) {
    this.setState({
        number: text.replace(/[^(((\d)+(\.)\d)|((\d)+))]/g,'_').split("_"))[0],
    });
}

Você pode remover caracteres não numéricos usando regex

onTextChanged (text) {
    this.setState({
        myNumber: text.replace(/\D/g, ''),
    });
}

const [text, setText] = useState('');

const onChangeText = (text) => {
  if (+text) {
    setText(text);
  }
};

<TextInput
  keyboardType="numeric"
  value={text}
  onChangeText={onChangeText}
/>

Isso deve salvar de teclados físicos

Isso não funciona no IOS, setState -> render -> não altera o texto, mas pode alterar outro. O textinput não pode alterar seu próprio valor quando textOnChange.

A propósito, isso funciona bem no Android.

Criei um componente que resolve esse problema:

https://github.com/amirfl/react-native-num-textinput

Aqui está minha outra resposta simples para aceitar apenas números na caixa de texto usando expressões regulares.

onChanged(text){
    this.setState({ 
         myNumber: text.replace(/[^0-9]/g, '') 
    });
}

Para números decimais / flutuantes, tente isso

    onChangeMyFloatNumber(text){
let newText = '';
let numbers = '0123456789.';

for (var i=0; i < text.length; i++) {
    if(numbers.indexOf(text[i]) > -1 ) {
        newText = newText + text[i];
        if(text[i]=="."){
          numbers = '0123456789'
        }
    }
    else {
        // your call back function
        alert("please enter numbers only");
    }
}
this.setState({ MyFloatNumber: newText });

}

Bem, esta é uma maneira muito simples de validar um número diferente de 0.

if (+inputNum)

Será NaN se inputNum não for um número ou falso se for 0