[解決済み] 数字しか受け付けないReact NativeのTextInput

質問

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を作成できるので、オープンソースにもなるでしょう。

即座に修正することの欠点は、自分の値に何が起こったかについて混乱を防ぐために、正しいフィードバックがユーザーに与えられることを確実にすることです。