☰

数字のみを受け入れるReact Native TextInput 質問する

tag-icon • tag-icon react-native
数字のみを受け入れるReact Native TextInput 質問する

数字 (0 - 9) のみを入力できるReact Native コンポーネントが必要です。をにTextInput設定すれば、ピリオド (.) 以外の入力はほぼ完了します。ただし、これでは数値以外の文字がフィールドに貼り付けられるのを防ぐことはできません。keyboardTypenumeric

これまでのところ、私が思いついたのは、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})
}

これは機能しているようですが、ハックのようです。これを行う別の方法はありますか?

ベストアンサー1

RegExp を使用して数字以外の文字を置き換えると、他の回答のようにホワイトリストで for ループを使用するよりも高速になります。

onTextChange ハンドラーにこれを使用します:

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

パフォーマンステストはこちら:https://jsperf.com/文字列から数字以外の文字を削除する

おすすめ記事