React Native TextInput chỉ chấp nhận các ký tự số

Tôi cần có một TextInputthành phần React Native sẽ chỉ cho phép nhập các ký tự số (0 - 9). Tôi có thể thiết lập keyboardTypeđể numericmà gần như được tôi có cho đầu vào ngoại trừ dấu chấm (.). Tuy nhiên, điều này không có gì ngăn cản việc dán các ký tự không phải số vào trường.

Những gì tôi đã nghĩ ra cho đến nay là sử dụng OnChangeTextsự kiện để xem văn bản đã nhập. Tôi xóa mọi ký tự không phải số khỏi văn bản. Sau đó đặt văn bản vào một trường trạng thái. Sau đó cập nhật tài sản TextInputcủa nó Value. Đoạn mã bên dưới.

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

Điều này có vẻ hiệu quả nhưng nó có vẻ giống như một vụ hack. Có một cách khác để làm điều này?

Đó là cách chính xác để làm điều đó cho đến khi một thành phần như vậy (hoặc thuộc tính trên TextInput) được phát triển cụ thể.

Trang web có loại 'số' cho phần tử đầu vào, nhưng đó là dựa trên web và phản ứng gốc không sử dụng chế độ xem web.

Bạn có thể xem xét việc tạo đầu vào đó như một thành phần phản ứng của riêng nó (có thể gọi NumberInput): điều đó sẽ cho phép bạn sử dụng lại nó hoặc thậm chí có thể là nguồn mở nó vì bạn có thể tạo nhiều TextInput có các bộ lọc / kiểm tra giá trị khác nhau.

Nhược điểm của việc sửa chữa ngay lập tức là đảm bảo phản hồi chính xác được cung cấp cho người dùng để tránh nhầm lẫn về những gì đã xảy ra với giá trị của họ

Sử dụng RegExp để thay thế bất kỳ chữ số nào sẽ nhanh hơn so với sử dụng vòng lặp for với danh sách trắng, giống như các câu trả lời khác.

Sử dụng cái này cho trình xử lý onTextChange của bạn:

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

Kiểm tra hiệu suất tại đây: https://jsperf.com/removing-non-digit-characters-from-a-string

Bạn có thể làm điều đó như thế này. Nó sẽ chỉ chấp nhận các giá trị số và giới hạn ở 10 số như mong muốn của bạn.

<TextInput 
   style={styles.textInput}
   keyboardType='numeric'
   onChangeText={(text)=> this.onChanged(text)}
   value={this.state.myNumber}
   maxLength={10}  //setting limit of input
/>

Bạn có thể xem giá trị đã nhập bằng cách viết mã sau vào trang của mình:

{this.state.myNumber}

Trong hàm onChanged (), mã trông như thế này:

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

Tôi hy vọng điều này sẽ hữu ích cho những người khác.

React Native TextInput cung cấp các đạo cụ keyboardType với các giá trị có thể có sau: mặc định số-pad thập phân-pad số-địa chỉ email phone-pad

vì vậy đối với trường hợp của bạn, bạn có thể sử dụng keyboardType = 'number-pad' để chỉ chấp nhận các số. Điều này không bao gồm '.'

vì thế,

<TextInput 
  style={styles.textInput}
  keyboardType = 'number-pad'
  onChangeText = {(text)=> this.onChanged(text)}
  value = {this.state.myNumber}
/>

là những gì bạn phải sử dụng trong trường hợp của bạn.

để biết thêm chi tiết, vui lòng tham khảo liên kết tài liệu chính thức cho TextInput: https://facebook.github.io/react-native/docs/textinput#keyboardtype

Chức năng xác thực đầu vào:

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

Tôi hy vọng điều này là hữu ích.

Chỉ cho phép các số sử dụng biểu thức chính quy

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

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

Bạn có thể muốn có nhiều hơn một xác thực

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

numbersOnly(e) {
    return /^\d+$/.test(e.toString()) ? true : false
}

notZero(e) {
    return /0/.test(parseInt(e)) ? false : true
}

validations(e) {
    return this.notZero(e) && this.numbersOnly(e)
        ? this.setState({ numColumns: parseInt(e) })
        : false
}

Giải pháp đầu tiên

Bạn có thể sử dụng keyboardType = 'numeric'cho bàn phím số.

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

Trong trường hợp đầu tiên, các dấu câu được bao gồm, ví dụ: - . và -

Giải pháp thứ hai

Sử dụng biểu thức chính quy để xóa dấu chấm câu.

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

Vui lòng kiểm tra liên kết đồ ăn nhẹ

https://snack.expo.io/@vishal7008/numeric-keyboard

Một lời nhắc nhỏ cho những ai gặp phải sự cố rằng "onChangeText" không thể thay đổi giá trị TextInput như mong đợi trên iOS: đó thực sự là một lỗi trong ReactNative và đã được sửa trong phiên bản 0.57.1. Tham khảo tại: https://github.com/facebook/react-native/issues/18874

<TextInput autoCapitalize={'none'} maxLength={10} placeholder='Mobile Number'  value={this.state.mobile} onChangeText={(mobile) => this.onChanged(mobile)}/>

và phương thức 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 });
    }
}

Tôi gặp sự cố tương tự trong iOS, khi sử dụng sự kiện onChangeText để cập nhật giá trị của văn bản do người dùng nhập. Tôi không thể cập nhật giá trị của TextInput, vì vậy người dùng vẫn sẽ thấy các ký tự không phải số mà anh ta đã nhập.

Điều này là do, khi một ký tự không phải số được nhấn, trạng thái sẽ không thay đổi vì this.setState sẽ sử dụng cùng một số (số vẫn còn sau khi loại bỏ các ký tự không phải số) và khi đó TextInput sẽ không hiển thị.

Cách duy nhất tôi tìm thấy để giải quyết vấn đề này là sử dụng sự kiện keyPress xảy ra trước sự kiện onChangeText và trong đó, sử dụng setState để thay đổi giá trị của trạng thái thành một trạng thái khác, hoàn toàn khác, buộc kết xuất khi sự kiện onChangeText được gọi . Không hài lòng lắm với điều này nhưng nó đã hoạt động.

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

Tôi đã viết hàm này mà tôi thấy là hữu ích để ngăn người dùng không thể nhập bất kỳ thứ gì khác ngoài tôi sẵn sàng chấp nhận. Tôi cũng đã sử dụng keyboardType="decimal-pad"và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 })
    }
}

Khối đầu tiên iflà xử lý lỗi cho sự kiện người dùng xóa tất cả văn bản hoặc sử dụng dấu thập phân làm ký tự đầu tiên hoặc nếu họ cố gắng đặt nhiều hơn một chữ số thập phân, ifkhối thứ hai đảm bảo họ có thể nhập bằng nhiều số như họ muốn trước vị trí thập phân, nhưng chỉ tối đa hai chữ số thập phân sau dấu chấm.

Sử dụng RegExp để thay thế bất kỳ chữ số nào. Hãy cẩn thận, mã tiếp theo sẽ cung cấp cho bạn chữ số đầu tiên anh ta tìm thấy, vì vậy nếu người dùng dán đoạn văn có nhiều hơn một số (xx.xx), mã sẽ cung cấp cho bạn số đầu tiên. Điều này sẽ hữu ích nếu bạn muốn thứ gì đó như giá, không phải điện thoại di động.

Sử dụng cái này cho trình xử lý onTextChange của bạn:

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

Bạn có thể xóa các ký tự không phải số bằng regex

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

Điều này không hoạt động trên IOS, setState -> render -> không thay đổi văn bản, nhưng có thể thay đổi khác. Textinput không thể tự thay đổi giá trị khi textOnChange.

Nhân tiện, tính năng này hoạt động tốt trên Android.

Tôi đã tạo một thành phần giải quyết vấn đề này:

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

Đây là câu trả lời đơn giản khác của tôi để chỉ chấp nhận các số trong hộp văn bản bằng Biểu thức chính quy.

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

Đối với số thập phân / dấu phẩy động, chỉ thử điều này

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

}

Đây là một cách rất đơn giản để xác nhận một số khác 0.

if (+inputNum)

Nó sẽ là NaN nếu inputNum không phải là số hoặc false nếu nó là 0