Предотвращение ввода пользователями не цифр в текстовое поле ввода с помощью React native

Question

Я не хочу, чтобы пользователь мог вводить алфавиты во входных данных в соответствии с той же функциональностью keypressevent из jquery / javascript.

Answer 1

Попробуйте replace метод в JS, заменив не алфавитный символ пустой строкой.

Код

import React, { Component } from 'react';
import { AppRegistry, TextInput } from 'react-native';

export default class UselessTextInput extends Component {
  constructor(props) {
    super(props);
    this.state = { inputText: '' };
  }

  onChanged (text) {
    this.setState({
      inputText: text.replace(/[A-Za-z]/g, ''),
    });
  }

  render() {
    return (
      <TextInput
        style={{height: 40, borderColor: 'gray', borderWidth: 1, marginTop: 200}}
        onChangeText={(text)=> this.onChanged(text)}
        value={this.state.inputText}
      />
    );
  }
}

// skip this line if using Create React Native App
AppRegistry.registerComponent('AwesomeProject', () => UselessTextInput);

Answer 2

Вы должны использовать TextInput Компонент белого цвета для пропеллера keyboardType = {"number-pad"}

import {TextInput} из "Reaction-native";

, затем используйте его как

<TextInput
   keyboardType = {"number-pad"}
   // add more props ...
/>

для всех реквизитов, которые вы можете добавить, смотрите эту ссылку