प्रतिक्रियाशील मूलपाठ TextInput जो केवल संख्यात्मक वर्णों को स्वीकार करता है

Question 1

मुझे एक प्रतिक्रियाशील मूल 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})
}

यह काम करने लगता है लेकिन यह एक हैक की तरह लगता है। क्या इसे करने का और कोई तरीका है?

Question 2

ऐसा घटक (या TextInput पर विशेषता) तक इसे करने का सही तरीका विशेष रूप से विकसित किया गया है।

इनपुट तत्व के लिए वेब में 'संख्या' प्रकार होता है, लेकिन यह वेब आधारित है और प्रतिक्रिया-मूल वेब दृश्य का उपयोग नहीं करता है।

आप उस इनपुट को एक प्रतिक्रिया घटक के रूप में बनाने पर विचार कर सकते हैं, वह स्वयं है (शायद नंबरइनपुट कहलाता है): जो आपको पुन: उपयोग करने में सक्षम करेगा या हो सकता है कि यह स्रोत भी खोले क्योंकि आप कई टेक्स्टइन्पुट बना सकते हैं जिसमें अलग-अलग मूल्य के फ़िल्टर / चेकर्स हों।

तत्काल सुधार के लिए नकारात्मक पक्ष यह सुनिश्चित करना है कि उपयोगकर्ता को सही प्रतिक्रिया दी जाए ताकि भ्रम को रोका जा सके कि उसके मूल्य का क्या हुआ

Question 3

किसी भी गैर अंक को बदलने के लिए RegExp का उपयोग करना श्वेतसूची के साथ लूप के लिए उपयोग करने की तुलना में तेज़ है, जैसे अन्य उत्तर करते हैं।

अपने onTextChange हैंडलर के लिए इसका उपयोग करें:

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

यहाँ प्रदर्शन परीक्षण: https://jsperf.com/removing-non-digit-characters-from-a-string

Question 4

आप इसे इस तरह से कर सकते हैं। यह केवल संख्यात्मक मानों को स्वीकार करेगा, और आपकी इच्छा के अनुसार 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 });
}

मुझे उम्मीद है कि यह दूसरों के लिए उपयोगी है।

Question 5

प्रतिक्रियाशील मूल पाठ इनपुट संभव मानों के साथ कीबोर्ड टाइप प्रॉप प्रदान करता है: डिफ़ॉल्ट नंबर-पैड दशमलव-पैड संख्यात्मक ईमेल-पता फोन-पैड

इसलिए आपके मामले के लिए आप केवल संख्या स्वीकार करने के लिए कीबोर्ड टाइप = 'नंबर-पैड' का उपयोग कर सकते हैं। इसमें 'शामिल नहीं है'

इसलिए,

<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

Question 6

इनपुट को मान्य करने का कार्य:

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

मुझे आशा है कि यह मददगार है।

Question 7

केवल एक नियमित अभिव्यक्ति का उपयोग करके संख्याओं की अनुमति दें

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

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

आप एक से अधिक सत्यापन करना चाहते हैं


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

Question 8

पहला उपाय

आप 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/numeric-keyboard

Question 9

उन लोगों के लिए एक तरह की याद दिलाता है जिन्होंने इस समस्या का सामना किया कि "onChangeText" iOS पर उम्मीद के मुताबिक TextInput मान को बदल नहीं सकता है: जो वास्तव में ReactNative में एक बग है और 0.57.1 संस्करण में तय किया गया था। इसका संदर्भ लें: https://github.com/facebook/react-native/issues/18874

Question 10

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

और परिवर्तित विधि:

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

Question 11

मुझे आईओएस में एक ही समस्या थी, उपयोगकर्ता द्वारा टाइप किए गए पाठ के मूल्य को अपडेट करने के लिए onChangeText घटना का उपयोग करके मैं TextInput के मूल्य को अपडेट करने में सक्षम नहीं हो रहा था, इसलिए उपयोगकर्ता अभी भी गैर-संख्यात्मक वर्णों को देखेगा जो उसने टाइप किया था।

ऐसा इसलिए था, क्योंकि जब एक गैर संख्यात्मक चरित्र को दबाया जाता था, तो राज्य नहीं बदलता था क्योंकि यह शुरू होता था। नंबर एक ही संख्या (गैर संख्यात्मक वर्णों को हटाने के बाद बनी हुई संख्या) का उपयोग करेगा और फिर TextInput रेंडर नहीं करेगा।

इसका समाधान करने का एकमात्र तरीका मुझे कीप इवेंट का उपयोग करना था, जो onChangeText ईवेंट से पहले होता है, और इसमें, राज्य के मूल्य को दूसरे, पूरी तरह से अलग करने के लिए सेटस्टैट का उपयोग करते हैं, ऑन रेंडर को दोबारा प्रस्तुत करने के लिए मजबूर करते हैं जब onCextText ईवेंट कहा जाता था । इससे बहुत खुश नहीं हुए लेकिन इसने काम किया।

Question 12

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

Question 13

मैंने यह फ़ंक्शन लिखा था, जो उपयोगकर्ता को मैं स्वीकार करने के लिए तैयार होने के अलावा कुछ भी दर्ज करने में सक्षम होने के लिए मददगार पाया गया था। मैंने भी इस्तेमाल किया 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ब्लॉक यह सुनिश्चित करता है कि वे इसमें टाइप कर सकते हैं दशमलव स्थान से पहले वे जितनी संख्या चाहते हैं, लेकिन बिंदु के बाद केवल दो दशमलव स्थानों तक।

Question 14

किसी भी गैर अंक को बदलने के लिए एक RegExp का उपयोग करना। ध्यान रखें अगला कोड आपको पहला अंक मिलेगा जो उसने पाया है, इसलिए यदि उपयोगकर्ता एक से अधिक संख्या (xx.xx) के साथ एक पैराग्राफ पेस्ट करता है तो कोड आपको पहला नंबर देगा। यह मदद करेगा यदि आप कीमत की तरह कुछ चाहते हैं, तो मोबाइल फोन नहीं।

अपने onTextChange हैंडलर के लिए इसका उपयोग करें:

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

Question 15

आप रेगेक्स का उपयोग करके गैर-संख्यात्मक वर्ण हटा सकते हैं

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

Question 16

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

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

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

यह भौतिक कीबोर्ड से बचाना चाहिए

Question 17

यह IOS पर काम नहीं करता है, setState -> रेंडर -> टेक्स्ट को न बदलें, लेकिन दूसरे को बदल सकते हैं। TextOnChange जब textinput ही मूल्य बदल नहीं सकते।

वैसे, यह एंड्रॉइड पर अच्छी तरह से काम करता है।

Question 18

मैंने एक घटक बनाया है जो इस समस्या को हल करता है:

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

Question 19

नियमित एक्सप्रेशंस का उपयोग करके टेक्स्ट बॉक्स में केवल संख्याओं को स्वीकार करने का मेरा दूसरा सरल उत्तर यहां दिया गया है।

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

Question 20

दशमलव / फ़्लोटिंग पॉइंट संख्या के लिए केवल यह प्रयास करें

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

}

Question 21

खैर, यह 0 से भिन्न संख्या को मान्य करने का एक बहुत ही सरल तरीका है।

if (+inputNum)

यह NaN होगा यदि inputNum एक संख्या या गलत नहीं है यदि यह 0 है