剧场模式
首页React & Redux 实现注册登录认证系统

React & Redux 实现注册登录认证系统 #5 实现注册页面

下载源码hfpp2012发布于1215 次点击播放时长:06:41
1

client/src/components/SignupForm.js

import React, { Component } from 'react';

class SignupForm extends Component {
  constructor(props) {
    super(props)
    this.state = {
      username: '',
      email: '',
      password: '',
      passwordConfirmation: ''
    }
  }

  onChange = (e) => {
    this.setState({ [e.target.name]: e.target.value });
  }

  onSubmit = (e) => {
    e.preventDefault();
    console.log(this.state);
  }

  render() {
    return (
      <form onSubmit={ this.onSubmit }>
        <h1>Join our community!</h1>

        <div className="form-group">
          <label className="control-label">Username</label>

          <input
            value={ this.state.username }
            onChange={ this.onChange }
            type="text"
            name="username"
            className="form-control"
          />
        </div>

        <div className="form-group">
          <label className="control-label">Email</label>

          <input
            value={ this.state.email }
            onChange={ this.onChange }
            type="email"
            name="email"
            className="form-control"
          />
        </div>

        <div className="form-group">
          <label className="control-label">Password</label>

          <input
            value={ this.state.password }
            onChange={ this.onChange }
            type="password"
            name="password"
            className="form-control"
          />
        </div>

        <div className="form-group">
          <label className="control-label">Password Confirmation</label>

          <input
            value={ this.state.passwordConfirmation }
            onChange={ this.onChange }
            type="password"
            name="passwordConfirmation"
            className="form-control"
          />
        </div>

        <div className="form-group">
          <button className="btn btn-primary btn-lg">
            Sign up
          </button>
        </div>
      </form>
    );
  }
}

export default SignupForm;
1 条回复
播放列表目录
你也想拥有自己的网站,并成为一名自由的讲师吗?
扫码打赏 16.8 元起加我微信拉入微信群

加我微信:15014006126

加 QQ 群:697272886

打赏的朋友或 Pro 学员获得特权

  • 加我微信拉你进微信群,享有更多互动和人脉资源;

  • 和程序员老兵我成为微信好友;

  • 不定期技术分享和视频问题解答

相似的视频

© Rails365 | 隐私条款 | 服务条款 | 加盟本站 | 粤ICP备15004902号 | 在线学员:18

Top