Reactで桁数チェックを実装してみた #React

はじめに

Reactを使って桁数チェックサンプルを作ってみました。
このサンプルは言い換えると、"独自のイベント(チェック機能)をコンポーネントに組み込む"
ということになります。サンプルコードを記載してますが、忙しい方は
次項の前提がそろっていればコピペで動作確認もできます。

前提

・Node.jsをインストールしている
・npm(パッケージ管理ツール)でプロジェクトを作成している
(npm init react-app プロジェクト名)
・プロジェクト作成後に/public/index.htmlと/src/index.jsは編集していない
(=プロジェクト作成初期状態である)

サンプルで実現できること

テキストボックスに6文字以上入力しようとした
場合にアラート表示される

コードサンプル

/src/App.js


import React, { Component } from 'react';
import Rect from './Rect';
import './App.css';

class App extends Component {

  //css用のプロパティは何でも構いません
  msgStyle = {
    fontSize: "20pt",
    color: "#900",
    margin: "20px 0px",
    padding: "5px",
  }

  //イベント(alertError)をバインドしておく
  constructor(props) {
    super(props);
    this.state = {
      message: "type your message"
    };
    this.alertError = this.alertError.bind(this);
  }

  //桁数チェックに引っかかった時に呼び出される
  alertError(event) {
    alert(event.target.value + "は長すぎます(最大5文字)");
  }

  //初期表示のレンダリング
  render() {
    return <div>
      <h2>{this.state.message}</h2>
      <Message maxlength="5" digitError={this.alertError} />
    </div>;
  }
}

class Message extends Component {

  //css用のプロパティは何でも構いません
  inputStyle = {
    fontSize: "12px",
    padding: "5px"
  }

  //イベント(doCheck)をバインドしておく
  constructor(props) {
    super(props);
    this.doCheck = this.doCheck.bind(this);
  }

  //桁数のチェックを実行
  doCheck(e) {
    if (e.target.value.length > this.props.maxlength) {
      this.props.digitError(e);
      e.target.value = e.target.value.substr(0, this.props.maxlength);
    }
  }

  //Appコンポーネントから呼び出される
  render() {
    return <input type="text" style={this.inputStyle} onChange={this.doCheck}/>
  }
}

export default App;

コードサンプルを順に見ていく

①コンポーネントタグで子コンポーネントの呼び出しをしています。
Messageコンポーネントの属性値(maxlength,alertError関数)がpropsオブジェクトで渡されます。


  //初期表示のレンダリング
  render() {
    return <div>
      <h2>{this.state.message}</h2>
      <Message maxlength="5" digitError={this.alertError} />
    </div>;
  }

②イベントハンドラ(onChange属性)には値を関数で渡します。ここでは、
同じコンポーネント内に定義しているdoCheck関数を渡してます。
※JSXではイベント属性をキャメルケースで書きます

  //Appコンポーネントから呼び出される
  render() {
    return <input type="text" style={this.inputStyle} onChange={this.doCheck}/>
  }

③引数のeはイベントオブジェクトを指してます。
サンプルでいうと、②で見たinputタグのことです。
入力したテキスト値が最大値を超えた場合、親コンポーネントに定義した
digitError関数を呼び出します。

  //桁数のチェックを実行
  doCheck(e) {
    if (e.target.value.length > this.props.maxlength) {
      this.props.digitError(e);
      e.target.value = e.target.value.substr(0, this.props.maxlength);
    }
  }

④引数は③で見たイベントオブジェクトを受け取ります。
ここではシンプルにアラート表示だけしてます。

  //桁数チェックに引っかかった時に呼び出される
  alertError(event) {
    alert(event.target.value + "は長すぎます(最大5文字)");
  }

まとめ

通常のjsだと簡単に書けますが、Reactを使うとなると急に難しくなった感じがしますね。
「JSXのイベントハンドラで関数呼び出しをして処理をする」これだけ分かればいいかと思います。
今回のイベント処理はあくまで1例です、他にも書き方はたくさんあります。
私自身Reactは勉強中なので、色々と試していこうと思います。