SHARE
TWEET

Untitled

a guest Jun 27th, 2019 62 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React from "react";
  2.  
  3. export default class LoginComponent extends React.Component {
  4.     constructor(props) {
  5.         super(props);
  6.         this.state = {
  7.             userName: '',
  8.         };
  9.         this.updateUserName = this.updateUserName.bind(this);
  10.     }
  11.  
  12.     onClickSignUp() {
  13.         console.log(this.state);
  14.         alert("clicked sign up with value: username=" + this.state.userName);
  15.     }
  16.     updateUserName(e) {
  17.         console.log(e);
  18.         this.setState({
  19.             userName: e.target.value
  20.         });
  21.     }
  22.  
  23.     render() {
  24.         return (
  25.             <div className="LoginComponent">
  26.                 <h1>Welcome!</h1>
  27.  
  28.                 <div className="UserNameSegment">
  29.                     <text>UserName: </text>
  30.                     <input id="UserNameInput" value={this.state.userName} onChange={e => this.updateUserName(e)} />
  31.                 </div>
  32.  
  33.                 <div className="ButtonGroup">
  34.                     <button id="SignUpButton" onClick={this.onClickSignUp}>Sign Up</button>
  35.                 </div>
  36.             </div>
  37.         );
  38.     }
  39. }
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top