0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2020-06-14

##はじめに
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は勉強中なので、色々と試していこうと思います。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?