daily pastebin goal
45%
SHARE
TWEET

Untitled

a guest Jan 19th, 2019 83 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1.  
  2. import React, { Component } from 'react'
  3. import './Register.css';
  4. import axios from 'axios'
  5.  
  6. const REGISTER_URL = 'http://127.0.0.1:8000/api/register/' // received api ulr...
  7.  
  8. const initiaState = {
  9.         username : '',
  10.         email : '',
  11.         password: ''
  12.     }
  13.  
  14. class Register extends Component{
  15.  
  16.     constructor(props){
  17.         super(props)
  18.  
  19.         this.myRegister = React.createRef()
  20.     }
  21.  
  22.  
  23.     state = {
  24.         ...initiaState
  25.     }
  26.  
  27.  
  28.     changeHandler = (event) => {
  29.  
  30.         this.setState({
  31.             [event.target.name]: event.target.value
  32.         })
  33.  
  34.     }
  35.  
  36.     submitHandler = (event) =>{
  37.         event.preventDefault()
  38.         console.log(this.state)
  39.         this.myRegister.current.reset()
  40.         this.setState({
  41.             ...initiaState
  42.         });
  43.         axios.post(REGISTER_URL,this.state)
  44.         .then(res =>{
  45.             console.log(res)
  46.        
  47.         })
  48.         .catch(error =>{
  49.             console.log("ERROR::: "+error)
  50.         })
  51.     }
  52.  
  53.     render(){
  54.  
  55.         return(
  56.             <div className="Register-box">
  57.  
  58.             <form ref = {this.myRegister} className="Form" onSubmit={this.submitHandler }>
  59.                 <div className ="form-group ">
  60.                   <label htmlFor="username" > Name: </label>
  61.                    <input
  62.                    className = "from-control ml-4"
  63.                    type="text"
  64.                    placeholder = '  Enter Your Name '
  65.                    name = "username"
  66.                    id = "username"
  67.                    value = {this.state.name}
  68.                    onChange = {this.changeHandler}
  69.                    />
  70.                 </div>
  71.  
  72.                 <div className ="form-group">
  73.                   <label htmlFor="email" > Email: </label>
  74.                    <input
  75.                    className = "from-control ml-4"
  76.                    type="text"
  77.                    placeholder = '  Enter Your Email '
  78.                    name = "email"
  79.                    id = "email"
  80.                    value = {this.state.email}
  81.                    onChange = {this.changeHandler}
  82.                    />
  83.                 </div>
  84.  
  85.                 <div className ="form-group">
  86.                   <label htmlFor="password" className="mr-4"> Password: </label>
  87.                    <input
  88.                    className = "from-control ml-2"
  89.                    type="password"
  90.                    placeholder = '  Enter Your Password '
  91.                    name = "password"
  92.                    id = "password"
  93.                    value = {this.state.password}
  94.                    onChange = {this.changeHandler}
  95.                    />
  96.                 </div>
  97.  
  98.  
  99.  
  100.                 <button className = "btn btn-primary" type="submit" value="Submit"> Submit </button>
  101.             </form>
  102.  
  103.  
  104.  
  105.             </div>
  106.            
  107.         );
  108.        
  109.     }
  110. }
  111.  
  112. export default Register;
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