Reactを使う 5 - ログイン画面 -

今回は簡単なログイン画面を作ってみたいと思います。

の前に・・余談ですがエディッタにatomを使っている場合、
デフォルトだと.jsxファイルを開いてもシンタックスハイライトされていません。

そこでreactパッケージをインストールすると.jsxファイルが
シンタックスハイライトされて表示されるようになります。

本当にただの余談でしたw

コンポーネント作成

---

構成は今まで通りで、今回はlogin.jsxを新たに作成します。
まずは画面だけを作成します。login.jsxを次のように実装します。

import React from 'react';
import ReactDOM from 'react-dom'

class Login extends React.Component {

  constructor() {
    super();
    this.state = {
      msg: 'none'
    };
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleSubmit(e) {
    console.log('handleSubmit');
  }

  render() {
    return (
      <div className="login">
        <h1>Login</h1>
        <form className="loing form" onSubmit={this.handleSubmit}>
          <input type="text" placeholder="Name" />
          <input type="text" placeholder="Password" />
          <input type="submit" value="Submit" />
        </form>
        <p>{this.state.msg}</p>
      </div>
    );
  }
}

ReactDOM.render(
  <Login />,
  document.getElementById('container')
);

↑でclassではなくclassNameとなっていますがclassと同じ働きをします。
また、↑ではSubmitボタンを押してもコンソールにログが出るだけになってます。

実行結果

イベント処理

---

次にSubmitボタンを押したら入力された名前とパスワードを
画面に表示させてみたいと思います。

まずはinputにrefを追加します。

• refとは? ・・・ inputなどの要素にアクセスできるようにするもの
                            要素へアクセスするにはReactDOM.findDOMNodeを使う

という事で早速refを追加してみます。

<form className="loing form" onSubmit={this.handleSubmit}>
  <input type="text" placeholder="Name" ref={(ref) => this.inputName = ref} />
  <input type="text" placeholder="Password" ref={(ref) => this.inputPass = ref} />
  <input type="submit" value="Submit" />
</form>

コールバックとして受け取ったrefをthis.inputNameやthis.inputPassに設定しています。

次にhandleSubmitを次のように修正します。

handleSubmit(e) {
  e.preventDefault(); // デバッグ用

  let name = ReactDOM.findDOMNode(this.inputName).value.trim();
  let pass = ReactDOM.findDOMNode(this.inputPass).value.trim();
  let message = `name[${name}] pass[${pass}]`;

  this.setState({msg: message});
}

本来ならSubmitボタンが押されたらサーバー側で処理してログイン後の画面に
遷移したりするのですが、今回はデモの為イベントをpreventDefaultによって
止めています。

this.inputNameやthis.inputPassから値を取り出しメッセージを出力させています
実行するとinputに入力された内容が画面に表示されているかと思います。

スタイルシート適用

---

classNameで指定した部分にスタイルシートを適用させてみます。
と言っても普通のCSSと変わりないです。

.login {
  background: #e0ffff;
}

.form {
  background: #fff8dc;
}

背景色を変更。リロードすると以下のようになります。