숫자 만 허용하는 React Native TextInput

TextInput숫자 (0-9) 만 입력 할 수 있는 React Native 구성 요소 가 필요합니다 . 나는 설정할 수 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})
}

이것은 작동하는 것처럼 보이지만 해킹처럼 보입니다. 이를 수행하는 다른 방법이 있습니까?

이는 그러한 구성 요소 (또는 TextInput의 속성)가 특별히 개발 될 때까지이를 수행하는 올바른 방법입니다.

웹에는 입력 요소에 대한 '숫자'유형이 있지만 웹 기반이며 react-native는 웹보기를 사용하지 않습니다.

해당 입력을 자체적으로 반응 구성 요소로 만드는 것을 고려할 수 있습니다 (NumberInput 호출 일 수 있음) : 다른 값 필터 / 체커를 가진 많은 TextInput을 만들 수 있기 때문에이를 재사용하거나 오픈 소스로 만들 수 있습니다.

즉각적인 수정의 단점은 자신의 가치에 무슨 일이 일어 났는지에 대한 혼란을 방지하기 위해 사용자에게 올바른 피드백을 제공하는 것입니다.

RegExp를 사용하여 숫자가 아닌 것을 대체하는 것이 다른 답변과 마찬가지로 화이트리스트와 함께 for 루프를 사용하는 것보다 빠릅니다.

onTextChange 핸들러에 이것을 사용하십시오.

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

성능 테스트 : https://jsperf.com/removing-non-digit-characters-from-a-string

이렇게 할 수 있습니다. 숫자 값만 허용되며 원하는대로 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 });
}

다른 사람들에게 도움이되기를 바랍니다.

React Native TextInput은 다음과 같은 가능한 값으로 keyboardType 소품을 제공합니다. 기본 숫자 패드 십진수 패드 숫자 이메일 주소 전화 패드

따라서 귀하의 경우에는 숫자 만 받아들이 기 위해 keyboardType = 'number-pad'를 사용할 수 있습니다. 여기에는 '.'가 포함되지 않습니다.

그래서,

<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

입력을 확인하는 기능 :

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

도움이 되었기를 바랍니다.

정규식을 사용하는 숫자 만 허용

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

첫 번째 솔루션

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

"onChangeText"가 iOS에서 예상대로 TextInput 값을 변경할 수 없다는 문제를 겪은 사람들에게 알림 : 이것은 실제로 ReactNative의 버그이며 버전 0.57.1에서 수정되었습니다. 참조 : 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)}/>

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

iOS에서 동일한 문제가 발생했습니다. onChangeText 이벤트를 사용하여 사용자가 입력 한 텍스트의 값을 업데이트했습니다. TextInput의 값을 업데이트 할 수 없었기 때문에 사용자가 입력 한 숫자가 아닌 문자를 계속 볼 수있었습니다.

이것은 숫자가 아닌 문자를 눌렀을 때 this.setState가 동일한 숫자 (숫자가 아닌 문자를 제거한 후에 남아있는 숫자)를 사용하고 TextInput이 다시 렌더링되지 않기 때문에 상태가 변경되지 않기 때문입니다.

이 문제를 해결하기 위해 찾은 유일한 방법은 onChangeText 이벤트 이전에 발생하는 keyPress 이벤트를 사용하는 것이었고, 그 안에서 setState를 사용하여 상태 값을 완전히 다른 다른 값으로 변경하여 onChangeText 이벤트가 호출 될 때 다시 렌더링되도록했습니다. . 이것에별로 만족 스럽지는 않지만 효과가있었습니다.

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

사용자가 내가 받아들이고 자하는 것 이외의 다른 것을 입력하는 것을 방지하는 데 도움이되는이 기능을 작성했습니다. 나는 또한 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블록은 다음과 같이 입력 할 수 있는지 확인합니다. 소수점 이하 소수점 이하 두 자리까지만 원하는만큼의 숫자.

RegExp를 사용하여 숫자가 아닌 것을 대체합니다. 다음 코드는 그가 찾은 첫 번째 숫자를 제공하므로 사용자가 둘 이상의 숫자 (xx.xx)가있는 단락을 붙여 넣으면 코드가 첫 번째 숫자를 제공합니다. 이것은 휴대폰이 아닌 가격과 같은 것을 원한다면 도움이 될 것입니다.

onTextChange 핸들러에 이것을 사용하십시오.

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

정규식을 사용하여 숫자가 아닌 문자를 제거 할 수 있습니다.

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

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

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

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

실제 키보드에서 저장해야합니다.

이것은 IOS에서 작동하지 않으며 setState-> render-> 텍스트를 변경하지 않지만 다른 것을 변경할 수 있습니다. textinput은 textOnChange 때 자체 값을 변경할 수 없습니다.

그건 그렇고, 이것은 안드로이드에서 잘 작동합니다.

이 문제를 해결하는 구성 요소를 만들었습니다.

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

정규 표현식을 사용하여 텍스트 상자에 숫자 만 허용하는 다른 간단한 대답은 다음과 같습니다.

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

소수점 / 부동 소수점 번호의 경우에만 시도하십시오.

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

}

음, 이것은 0과 다른 숫자를 검증하는 아주 간단한 방법입니다.

if (+inputNum)

inputNum이 숫자가 아니면 NaN이되고 0이면 false가됩니다.