react-admin-lte/lib/RegisterBox.js

简单封装的 AdminLTE react 类库，并包含一个编译配置。

import React from 'react';

export default class RegisterBox extends React.Component {
  constructor(props, context) {
    super(props, context);
    this.doRegister = this.doRegister.bind(this);
  }

  doRegister() {
    var email    = $("#email").val();
    var password = $("#password").val();
    var mobile   = $("#mobile").val();
    var nick     = $("#nick").val();
    if (this.props.onRegister) {
      this.props.onRegister(email, mobile, nick, password);
    }
  }

  render() {
    return <div className="login-box">
      <div className="login-logo">
        {this.props.title}
      </div>
      <div className="login-box-body">
        <p className="login-box-msg">{this.props.vtitle}</p>

        <form method="post" id="tForm">
          <div className="form-group has-feedback">
            <input className="form-control" placeholder="手机" id="mobile" name="mobile"/>
            <span className="glyphicon glyphicon-phone form-control-feedback"/>
          </div>
          <div className="form-group has-feedback">
            <input type="email" className="form-control" placeholder="邮箱" id="email" name="email"/>
            <span className="glyphicon glyphicon-envelope form-control-feedback"/>
          </div>
          <div className="form-group has-feedback">
            <input className="form-control" placeholder="昵称" id="nick" name="nick"/>
            <span className="glyphicon glyphicon-sunglasses form-control-feedback"/>
          </div>
          <div className="form-group has-feedback">
            <input type="password" className="form-control" placeholder="密码" id="password" name="password"/>
            <span className="glyphicon glyphicon-lock form-control-feedback"/>
          </div>
          <div className="form-group has-feedback">
            <input type="password" className="form-control" placeholder="确认密码" id="repassword" name="repassword"/>
            <span className="glyphicon glyphicon-lock form-control-feedback"/>
          </div>
          <div className="row">
            <div className="col-xs-8">
            </div>
            <div className="col-xs-4">
              <button type="button" id="btnLogin"
                      className="btn btn-primary btn-block btn-flat" onClick={this.doRegister}>注册
              </button>
            </div>
          </div>
        </form>
        <br/>
        {this.props.children}
      </div>
    </div>;
  }
}