React Native TextInput, который принимает только числовые символы

Ответ 1

Это правильный способ сделать это до тех пор, пока такой компонент (или атрибут в TextInput) не будет специально разработан.

В Интернете есть "тип номера для элемента ввода", но он основан на веб-интерфейсе и не отвечает за использование веб-представления.

Вы могли бы подумать о том, чтобы создать этот вход в качестве реактивного компонента самостоятельно (возможно, Call NumberInput): это позволяет вам повторно использовать его или, возможно, даже с открытым исходным кодом, поскольку вы можете создать много текстовых входов, которые имеют разные фильтры/шашки значений.

Недостатком немедленной коррекции является обеспечение правильной обратной связи с пользователем, чтобы предотвратить путаницу в отношении того, что случилось с его значением.

Ответ 2

Вы можете сделать это так. Он будет принимать только числовые значения и ограничивать до 10 чисел по вашему желанию.

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

Вы можете увидеть введенное значение, написав на своей странице следующий код:

{this.state.myNumber}

В функции onChanged() код выглядит следующим образом:

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 });
}

Я надеюсь, что это полезно для других.

Ответ 3

Использование RegExp для замены любой цифры не быстрее, чем использование цикла for с белым списком, как и другие ответы.

Используйте это для вашего обработчика onTextChange:

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

Тест производительности здесь: https://jsperf.com/removing-non-digit-characters-from-a-string

Ответ 4

Разрешить только числа с использованием регулярного выражения

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

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

Возможно, вы захотите иметь более одной проверки

<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
}

Ответ 5

React Native TextInput предоставляет реквизиты keyboardType со следующими возможными значениями: по умолчанию Номер-коврик десятичной подушечка числовой адрес электронной почты телефон-подушечка

поэтому для вашего случая вы можете использовать keyboardType = 'number-pad' для приема только чисел. Это не включает "."

так,

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

- это то, что вы должны использовать в вашем случае.

для более подробной информации, пожалуйста, обратитесь к официальной ссылке документа для TextInput:https://facebook.github.io/react-native/docs/textinput#keyboardtype

Ответ 6

Функция для проверки ввода:

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')}
/>

Я надеюсь, что это полезно.

Ответ 7

Любопытное напоминание тем, кто столкнулся с проблемой, что "onChangeText" не может изменить значение TextInput, как ожидалось на iOS: это фактически ошибка в ReactNative и была исправлена в версии 0.57.1. Ссылаться на: https://github.com/facebook/react-native/issues/18874

Ответ 8

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

и 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 });
    }
}

Ответ 9

У меня была такая же проблема в iOS, используя событие onChangeText, чтобы обновить значение текста, введенного пользователем. Я не смог обновить значение TextInput, поэтому пользователь все равно увидит нецифровые символы, которые он набрал.

Это было связано с тем, что при нажатии нецифрового символа состояние не изменилось бы, так как this.setState будет использовать тот же номер (число, которое осталось после удаления нецифровых символов), а затем TextInput не будет рендерироваться.

Единственным способом, который я нашел для этого, было использование события keyPress, которое происходит перед событием onChangeText, и в нем использовать setState, чтобы изменить значение состояния на другое, совершенно другое, заставляя re-рендеринг при вызове события onChangeText, Не очень доволен этим, но он сработал.

Ответ 10

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

Ответ 11

Использование RegExp для замены любой цифры. Будьте осторожны, следующий код даст вам первую цифру, которую он нашел, поэтому, если пользователь вставляет абзац с более чем одним номером (xx.xx), код даст вам первое число. Это поможет, если вы хотите что-то вроде цены, а не мобильного телефона.

Используйте это для вашего обработчика onTextChange:

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

Ответ 12

Я написал эту функцию, которая оказалась полезной для предотвращения возможности пользователю вводить что-либо, кроме того, что я готов был принять. Я также использовал keyboardType="decimal-pad" и мой onChangeText={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 })
    }
}

Первый блок if - это обработка ошибок для события, когда пользователь удаляет весь текст или использует десятичную точку в качестве первого символа, или если они пытаются ввести более одного десятичного знака place, второй блок if гарантирует, что они могут ввести столько цифр, сколько они хотят, до десятичного знака, но только до двух десятичных знаков после точки.

Ответ 13

Это не работает на IOS, setState → render → не меняет текст, но может изменить другое. TextInput не может изменить свое значение, когда textOnChange.

Ответ 14

Я создал компонент, который решает эту проблему:

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

Ответ 15

Вы можете удалить не числовые символы с помощью regex

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

Ответ 16

Вот еще мой простой ответ, чтобы принимать только цифры в текстовом поле, используя регулярные выражения.

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

Ответ 17

Для числа с десятичной/плавающей запятой попробуйте это

    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 });

}