নেটিভ টেক্সটইনপুট প্রতিক্রিয়া জানান যা কেবলমাত্র সংখ্যার অক্ষর গ্রহণ করে

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

এ জাতীয় উপাদান (বা টেক্সটইনপুটটিতে বিশিষ্টতা) নির্দিষ্টভাবে বিকাশ না হওয়া পর্যন্ত এটি করার সঠিক উপায়।

ইনপুট উপাদানটির জন্য ওয়েবে 'নম্বর' টাইপ রয়েছে তবে এটি ওয়েব ভিত্তিক এবং প্রতিক্রিয়া-স্থানীয় কোনও ওয়েব ভিউ ব্যবহার করে না।

আপনি সেই ইনপুটটিকে তার নিজস্ব প্রতিক্রিয়ার উপাদান হিসাবে তৈরি করতে বিবেচনা করতে পারেন (সম্ভবত কল করুন নাম্বার ইনপুট): এটি আপনাকে এটি পুনরায় ব্যবহার করতে সক্ষম করতে সক্ষম হতে পারে বা এমনকি ওপেন সোর্সও এহেতু আপনি অনেকগুলি টেক্সটইনপুট তৈরি করতে পারেন যার বিভিন্ন মান ফিল্টার / চেকার রয়েছে।

তাত্ক্ষণিক সংশোধনের নেতিবাচকতা হ'ল ব্যবহারকারীকে তার মূল্যের কী হয়েছে তা নিয়ে বিভ্রান্তি রোধ করার জন্য সঠিক প্রতিক্রিয়া দেওয়া নিশ্চিত করা

Question 3

অন্য উত্তরগুলির মতো কোনও হাইটলিস্টের সাথে লুপের জন্য ব্যবহারের চেয়ে কোনও অ-অঙ্কের প্রতিস্থাপনের জন্য একটি রেজিএক্সপ্যাক ব্যবহার করা দ্রুত।

আপনার অনটেক্সট চেঞ্জ হ্যান্ডলারের জন্য এটি ব্যবহার করুন:

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

আপনার ক্ষেত্রে আপনার যা ব্যবহার করতে হবে তা হল।

আরও তথ্যের জন্য দয়া করে পাঠ্য ইনপুট জন্য অফিসিয়াল ডক লিঙ্ক দেখুন: 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

যারা এই সমস্যার মুখোমুখি হয়েছিলেন তাদের জন্য একটি দয়া করে স্মরণ করিয়ে দেওয়া যে "অন চেঞ্জটেক্সট" আইওএস-তে প্রত্যাশা অনুযায়ী টেক্সটইনপুট মানটি পরিবর্তন করতে পারে না: এটি আসলে রিঅ্যাকটিভেটে একটি বাগ এবং সংস্করণ 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 পদ্ধতি:

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 ইভেন্টটি ব্যবহার করে আমি টেক্সটইনপুটটির মান আপডেট করতে সক্ষম হচ্ছিলাম না, তাই ব্যবহারকারী তারপরে যে সংখ্যাটি লিখেছেন তা এখনও দেখতে পাবে।

এটি কারণ ছিল, যখন একটি অ-সংখ্যাযুক্ত চরিত্রটি চাপ দেওয়া হয় তখন রাষ্ট্র পরিবর্তন হবে না কারণ সেটটি স্টেট একই সংখ্যাটি ব্যবহার করবে (সংখ্যাটি অ-অক্ষরগুলি সরিয়ে দেওয়ার পরেও রয়ে গেছে) এবং তারপরে টেক্সটইনপুট রেন্ডার করবে না।

এটির সমাধানের একমাত্র উপায় হ'ল onChangeText ইভেন্টের আগে ঘটে যাওয়া কীপ্রেস ইভেন্টটি ব্যবহার করা এবং এটিতে, স্টেটের স্টেট ব্যবহার করে রাষ্ট্রের মান অন্যটিতে পরিবর্তিত করা, সম্পূর্ণ আলাদা, অন-চেঞ্জটেক্সট ইভেন্টটি ডাকা হলে পুনরায় রেন্ডার করতে বাধ্য করা হয় re । এটি দিয়ে খুব খুশি নয় তবে এটি কাজ করেছিল।

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ব্লক নিশ্চিত করে যে তারা টাইপ করতে পারে দশমিক স্থানের আগে যতগুলি সংখ্যা তারা চান তবে পয়েন্টের পরে কেবলমাত্র দুটি দশমিক স্থান পর্যন্ত places

Question 14

কোনও অ ডিজিট প্রতিস্থাপন করতে একটি RegExp ব্যবহার করা। খেয়াল রাখুন পরবর্তী কোডটি আপনাকে তার প্রথম অঙ্কটি খুঁজে পেয়েছে, সুতরাং ব্যবহারকারী যদি একাধিক সংখ্যার (xx.xx) অনুচ্ছেদে পেস্ট করে তবে কোডটি আপনাকে প্রথম নম্বর দেবে। আপনি মোবাইল ফোন নয়, দামের মতো কিছু চাইলে এটি সহায়তা করবে।

আপনার অনটেক্সট চেঞ্জ হ্যান্ডলারের জন্য এটি ব্যবহার করুন:

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

এটি আইওএসে কাজ করে না, সেটস্টেট -> রেন্ডার করুন -> পাঠ্য পরিবর্তন না করে, তবে অন্যটি পরিবর্তন করতে পারে। পাঠ্যপরিচালনা যখন পাঠ্য অনচেন্জ হয় তখন নিজের মানটি পরিবর্তন করতে পারে না।

যাইহোক, এটি অ্যান্ড্রয়েডে ভাল কাজ করে।

Question 17

আমি একটি উপাদান তৈরি করেছি যা এই সমস্যাটি সমাধান করে:

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

Question 18

নিয়মিত এক্সপ্রেশন ব্যবহার করে পাঠ্য বাক্সে কেবলমাত্র সংখ্যাগুলি গ্রহণ করার জন্য এখানে আমার অন্যান্য সহজ উত্তর।

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

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

}

Question 20

ঠিক আছে, এটি একটি খুব সহজ উপায় 0 থেকে পৃথক একটি সংখ্যা যাচাই।

if (+inputNum)

যদি ইনপুটনামটি সংখ্যা না হয় বা এটি 0 হয় তবে এটি NaN হবে