仅接受数字字符的React本机文本输入

Question

我需要一个React NativeTextInput组件，它只允许输入数字字符（0-9）。我可以将keyboardType设置为numeric，这几乎可以让我在那里输入，除了句点（）。但是，这并不能阻止将非数字字符粘贴到字段中。

到目前为止，我想出的是使用OnChangeText事件来查看输入的文本。我从文本中删除任何非数字字符。然后将文本放在状态字段中。然后通过它的值属性更新TextInput。代码片段如下。

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

这似乎工作，但它似乎像一个黑客。还有别的办法吗？

Answer 1

这是正确的方法，直到这样的组件（或TextInput上的属性）被专门开发出来。

web具有用于输入元素的数字类型，但这是基于web的，react-母语不使用Web视图。

您可以考虑将该输入作为它自己的一个反作用组件（也许调用NoMbEnter）创建：这将使您能够重用它，甚至可以打开它，因为您可以创建许多具有不同值过滤器/检查器的TcTeTPUT。

立即纠正的缺点是确保向用户提供正确的反馈，以防止混淆其价值发生了什么

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

我希望这对其他人有帮助。

Answer 3

与其他答案一样，使用RegExp替换任何非数字要比使用带有白名单的for循环快。

对您的onTextChange处理程序使用此选项：

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

性能测试：https://jsperf.com/removing-non-digit-characters-from-a-string