[解決済み] 数字しか受け付けないReact NativeのTextInput
2022-06-15 04:31:54
質問
React Nativeの
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})
}
これはうまくいきそうですが、ハックされているような気がします。他に方法はないのでしょうか?
どのように解決するのですか?
そのようなコンポーネント(またはTextInputの属性)が特別に開発されるまでは、それが正しい方法です。
Webではinput要素に「number」型がありますが、それはWebベースのもので、react-nativeではWebビューを使用しません。
その入力をリアクトコンポーネントとして独自に作成することを検討できます(NumberInputと呼ぶかもしれません): それによって再利用が可能になりますし、異なる値フィルタ/チェッカーを持つ多くのTextInputを作成できるので、オープンソースにもなるでしょう。
即座に修正することの欠点は、自分の値に何が起こったかについて混乱を防ぐために、正しいフィードバックがユーザーに与えられることを確実にすることです。
関連
-
React-NativeにおけるイベントリスナーDeviceEventEmitter
-
[解決済み] React NativeとReactの違いは何ですか?
-
[解決済み] React / React Nativeでコンストラクタを使用する場合とgetInitialStateを使用する場合の違いとは何ですか?
-
[解決済み] react-nativeでキーボードを隠す
-
[解決済み】react-nativeで環境変数を設定する?
-
[解決済み】react nativeでボタンを無効化する。
-
[解決済み] CocoaPods は、ポッド "ReactCommon/jscallinvoker" の互換性のあるバージョンを見つけられませんでした。
-
[解決済み] React Nativeで水平罫線を描く
-
[解決済み] react nativeでテキストを縦書き(90度回転)させるには?
-
[解決済み] react-native run-ios` は、Error を返します。iPhone X シミュレータが見つかりません
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
React-NativeにおけるイベントリスナーDeviceEventEmitter
-
npm ERR! cb() never called!
-
[解決済み】react-nativeで環境変数を設定する?
-
[解決済み] React native reduxのreducerで配列に要素を追加するにはどうすればいいですか?
-
[解決済み] React Nativeで<Text>フィールドの単一単語を太字または斜体にする
-
[解決済み] react nativeでパスワード入力用のTextInputをスタイルする方法
-
[解決済み] CocoaPods は、ポッド "ReactCommon/jscallinvoker" の互換性のあるバージョンを見つけられませんでした。
-
[解決済み] React Nativeで水平罫線を描く
-
[解決済み] react nativeでテキストを縦書き(90度回転)させるには?
-
[解決済み] React Nativeの画面幅