Question

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

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

<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

你可以这样做。它只接受数字值，并根据您的意愿限制为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 2

使用RegExp替换任何非数字比使用白名单的for循环更快，就像其他答案一样。

将此用于onTextChange处理程序：

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

此处的效果测试：https://jsperf.com/removing-non-digit-characters-from-a-string

Answer 3

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

网络具有输入元素的“数字”类型，但这是基于网络的，而本地反应则不使用网络视图。

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

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

Answer 4

React Native TextInput为keyboardType道具提供以下可能的值：默认数字键盘小数点数字电子邮件地址手机键盘

因此对于您的情况，您可以使用keyboardType ='数字键盘'仅接受数字。这不包括'。'

所以

<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

Answer 5

验证输入的功能：

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

我希望这会有所帮助。

Answer 6

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

Answer 7

我在iOS中遇到同样的问题，使用onChangeText事件来更新用户输入的文本的值我无法更新TextInput的值，因此用户仍会看到非数字字符他打字。

这是因为，当按下非数字字符时，状态不会改变，因为this.setState将使用相同的数字（删除非数字字符后剩余的数字），然后TextInput将不会重新呈现。

我发现解决这个问题的唯一方法是使用在onChangeText事件之前发生的keyPress事件，并在其中使用setState将状态值更改为另一个，完全不同，强制在onChangeText时重新呈现事件被称为。对此不太满意，但它确实有效。

Answer 8

const [text, setText] = useState('');

const onChangeText = (text) => {
  if (+text) {
    setText(text);
  }
};

<TextInput
  keyboardType="numeric"
  value={text}
  onChangeText={onChangeText}
/>

这应该从物理键盘保存

Answer 9

仅允许使用正则表达式

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

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

Answer 10

谨此提醒那些遇到以下问题的人：“ onChangeText”无法按iOS预期的那样更改TextInput值：这实际上是ReactNative中的一个错误，已在0.57.1版中修复。请参阅：https://github.com/facebook/react-native/issues/18874

Answer 11

使用RegExp替换任何非数字。注意下一个代码会给你找到的第一个数字，所以如果用户粘贴一个带有多个数字（xx.xx）的段落，代码会给你第一个数字。如果你想要价格而不是手机，这将有所帮助。

将此用于onTextChange处理程序：

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

Answer 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块是针对用户删除所有文本的事件的错误处理，或者使用小数点作为第一个字符，或者如果他们尝试将多个小数点放在第二个字符， if块可确保他们可以在小数点前输入任意数量的数字，但只能在小数点后输入两个小数位。

Answer 13

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

Answer 14

怎么样

onChangeText={(val) => {  
     if(!isNaN(val)){
       //setValue()
     }
  }
keyboardType="numeric"

这将检查数字是否不是数字，然后才设置文本。

Answer 15

嗯，这是一种非常简单的方法来验证不同于0的数字。

if (+inputNum)

如果inputNum不是数字，则为NaN；如果为0，则为false

Answer 16

将您的键盘类型更改为数字

<TextInput
onChangeText={this.onChangeText}
 keyboardType={"numeric"}
/>

然后用空格替换点

onChangeText=(value)=>{
    let text = value.replace(".", '');
              if (isNaN(text)) {
                // Its not a number
                return
              }
    
    console.log("text",text)
    }

Answer 17

我认为，

onChangeText((val:string) => 
    isNaN(Number(val))
       ? val.substr(0, val.length - 1)
       : val
)
// 0     > true
// 0.    > true
// 0.3   > true
// -     > false
// .     > false
// 0.4-  > false
// -1.3  > true

此代码将检查“这不是数字吗？”并且，如果最后一个字符错误，则删除最后一个字。

Answer 18

第一个解决方案

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

  <View style={styles.container}>
        <Text style={styles.textStyle}>Enter Number</Text>
        <TextInput
          placeholder={'Enter number here'}
          style={styles.paragraph}
          keyboardType="numeric"
          onChangeText={value => this.onTextChanged(value)}
          value={this.state.number}
        />
      </View>

在第一种情况下，包括标点符号，例如：-。和-

第二个解决方案

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

 onTextChanged(value) {
    // code to remove non-numeric characters from text
    this.setState({ number: value.replace(/[- #*;,.<>\{\}\[\]\\\/]/gi, '') });
  }

请检查小吃链接

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

Answer 19

仅对十进制/浮点数尝试

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

}

Answer 20

这是我的另一个简单答案，即使用正则表达式仅接受文本框中的数字。

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

Answer 21

您可以使用正则表达式删除非数字字符

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

Answer 22

我创建了一个解决此问题的组件：

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

Answer 23

这不适用于IOS，setState - ＆gt;渲染 - ＆gt;不改变文字，但可以改变其他文字。当textOnChange时，textinput不能改变自身的值。

顺便说一句，这在Android上运行良好。

React仅接受数字字符的Native TextInput

23 个答案:

仅允许使用正则表达式