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