react-native – 仅接受数字字符的React Native TextInput

我需要一个React Native TextInput组件,它只允许输入数字字符(0 – 9).我可以将键盘类型设置为“数值”,几乎可以让我在那里输入,除了期间(.).但是,这并不阻止将非数字字符粘贴到字段中.

到目前为止我所想出的是使用OnChangeText事件来查看输入的文本.我从文本中删除任何非数字字符.然后将文本放在一个状态字段中.然后通过它的Value属性更新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})
}

这似乎工作,但它似乎是一个黑客.有另一种方法吗？

这是正确的方法,直到这种组件(或TextInput上的属性)被专门开发.

网络具有输入元素的“数字”类型,但是基于Web的并且反应本身不使用网络视图.

您可以考虑将该输入创建为自己的反应组件(可能调用NumberInput)：这将使您能够重用它,或者甚至可以开源,因为您可以创建具有不同值过滤器/检查器的许多TextInput.

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

react-native – 仅接受数字字符的React Native TextInput

相关文章