【ReactNative】入力エリアのバリデーションを実装してみた

はじめに

こんにちは。
本日はReactNativeでの入力エリアのバリデーションについて記事にしていきます。
今回はhooksを使用してのバリデーションについてです。
いろいろとライブラリもあるようですが、今回は触れません。

今回のアプリの説明

入力エリアは"99999999"まで入力することができる。
それ以上入力するとバックグラウンドが赤くなり「金額以上に達しました。」という文言が表示される。
数値以外の文字を入力するとエラーダイアログを表示する。（コピペ対策）
キーボードは数値入力キーボード
以下が画像になります。

入力前

"99999999"以上入力した時

数値以外の時

コードの確認

実際にコードを見てみましょう。
コードの前に処理の流れについて少し話します。
今回のバリデーションは以下の流れでチェックしています。

• 数字かどうかをチェック
  　　1.　数値を入力する
  　　2. onChangeTextに定義しているamountTextChangeを実行　
  　　3. 数値以外だった場合はダイアログを実行
• 文字数チェック
  　　1.　数値を入力する
  　　2. onChangeTextに定義しているamountTextChangeを実行
  　　3. stateに数値をsetする
  　　4. useEffectが実行される（1文字数値が入力されるたびに実行しチェックする）
  　　5. 8文字以上入力された場合は以下になる
  ①maxLengthにより入力されないようになる
  ②useEffectに定義されている、setBackgroundColorがredに切り替わることにより赤色になる
  ③lengthをチェックして、Textタグが追加される

では流れがわかったところで実際にコードを見てください。

app.tsx

  // Stateを定義
  const [text, setText] = useState<string>(value);
  const [backgroundColor, setBackgroundColor] = useState<string>('#CCFFFF');

  // 入力欄の数値が変わるごとに実行される
  useEffect(() => {
    // 文字数が8文字以上なら背景色を赤にする
    setBackgroundColor(text.length >= 8 ? 'red' : '#CCFFFF');
  }, [text]);

  const amountTextChange = (value: string) => {
    // 数値のみで構成されているか確認
    if (/^\d*$/.test(value)) {
      // stateにセットする
      setText(value);
    } else {
      // ダイアログを表示する
      Alert.alert('エラー', '数値のみを入力してください。');
    }
  }

  return (
    <View style={[styles.container, {backgroundColor}]}>
      <Text style={styles.label}>金額 :</Text>
      {/* 入力エリア */}
      <TextInput 
      maxLength={8}
      value={text} 
      style={styles.input} 
      onChangeText={amountTextChange}
      placeholder="金額を入力（最大9999999円）"
      keyboardType="numeric"/>
      <Text style={[styles.label,{padding:10}]}>円</Text>
      {/* 入力欄が8文字以上になった場合テキストを表示する */}
      {text.length >= 8 && <Text style={{color: '#ffffff'}}> 金額以上に達しました。</Text>}
    </View>
  );
};

// css
const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    alignItems: 'center',
    margin: 6,
    padding: 10,
    borderRadius: 5
  },
  label: {
    fontSize: 14,
    fontWeight: 'bold',
    marginRight: 10,
  },
  input: {
    flex: 1,
    fontSize: 12,
    padding: 5,
    borderColor: '#000080',
    borderWidth: 1,
    borderRadius: 5,
  },
});

最後に

いかがでしたでしょうか？
あまりReactNativeに慣れていないこともありバリデーションを実装するのにどうやってやるのだろうと悩んでいました。
ただhooksの勉強にもなったので良かったです。
みなさんもいきなりライブラリを使用しないで実装してみるのもいいと思いました。結構勉強になります。
ということでこの記事が参考になれば嬉しいです。
最後までご覧いただきありがとうございました。