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, '') });
}
스낵 링크를 확인하세요
