React Native Input 组件只接受数值答案

【问题标题】：React Native Input component takes ony numeric valuesReact Native Input 组件只接受数值
【发布时间】：2017-03-30 13:54:50
【问题描述】：

在 React-Native 项目中，我有一个来自 Native Base 的 Input 组件，我希望该组件仅采用数值 0-9 并为该字段提供默认值，我寻找有关此问题的其他问题，我没有知道这些答案可能是针对“textInput”组件的，还是某些建议对我不起作用？你能帮我吗？

【问题讨论】：

另见：stackoverflow.com/questions/32946793/…

标签： validation react-native numeric input-field

【解决方案1】：

您可以将keyboardType = 'numeric' 用于数字键盘。

 <View style={styles.container}>
        <Text style={styles.txtStyle}>Enter numeric value</Text>
        <TextInput
          placeholder={'Enter number'}
          style={styles.textInputStyle}
          keyboardType="numeric"
          onChangeText={value => this.onChanged(value)}
          value={this.state.myNumber}
        />
      </View>

在第一种情况下，标点符号包括 ex:- 。和 -

使用正则表达式去除标点符号。

 onChanged(value) {

    this.setState({ myNumber: value.replace(/[- #*;,.<>\{\}\[\]\\\/]/gi, '') });
  }

请查看零食链接

https://snack.expo.io/@vishal7008/1e004c

【讨论】：

【解决方案2】：

keyboardType="number-pad"

见源https://facebook.github.io/react-native/docs/textinput.html#keyboardtype

【讨论】：

【解决方案3】：

尝试使用

keyboardType="numeric"

source

【讨论】：

不幸的是，它仍然可以允许非数字输入，例如逗号和破折号，具体取决于平台。

【解决方案4】：

我抓住了你的问题，文本输入没有属性只能采用数字。但是我有两种方法，在第一种方法中，你必须编写代码来获取数值，这是 hack 但你可以使用它，代码是：

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

For second Method use this:

【讨论】：