THAPA TECHNICAL

HOUSE OF WEB DEVELOPERS AND TECHNOLOGY.

ReactJS Forms in One Video in Hindi

ReactJS Forms in One Video in Hindi 



Forms.js Component Source Code



import React, { Component } from 'react';
import './Form.css';

class Form extends Component{

constructor(props){
super(props);

this.state = {  fullname: "vinodthapa",
email: "Enter your email ID",
phone : "9876543211",
message : "DONATION FOR SUPPORT:    PhonePay = vinodbahadur@ybl      GooglePay: vbthapa55@oksbi
 Believe me, all this money will be used to make more quality videos and to make my channel grow. So that I can always provide you awesome free videos :)
"
}
}

// handlename = (event) => {
 
//  this.setState({ fullname: event.target.value })
// }

// handleemail = (event) => {
 
//  this.setState({ email: event.target.value })
// }

// handlenumber = (event) => {
 
//  this.setState({ number: event.target.value })
// }

// handlemessage = (event) => {
 
//  this.setState({ message: event.target.value })
// }

handlechangeall = (event) =>{
this.setState ( { [event.target.name] :event.target.value  } )
}

handlesubmit = (event) => {
alert (`my name is ${this.state.fullname}. 
My email id is ${this.state.email}
My mobile number is ${this.state.phone}.
My message to your company is ${this.state.message}
`);
// alert( JSON.stringify(this.state));
console.log( JSON.stringify(this.state));
event.preventDefault();
}

render(){
return(
<div>
<form onSubmit = {this.handlesubmit} >
<label> fullname </label>
<input  type="text" name="fullname"  value={this.state.fullname}  
onChange={this.handlechangeall} /> <br/>

<label> Email </label><br/>
<input  type="email" name="email" value= {this.state.email} 
onChange={this.handlechangeall} /> <br/>

<label> Mobile </label><br/>
<input  type="number" name="phone" value= {this.state.phone} 
        onChange={this.handlechangeall} /> <br/>

<label> Message </label>
<textarea  value= {this.state.message}  name="message"
        onChange={this.handlechangeall} />   <br/>

<input type="submit" value="Send" />
</form>
</div>
)
}

}

export default Form;


Form.css Source Code


input[type=text], input[type=email] , input[type=number] {
    width: 80%;
    padding: 5px 22px;
    margin: 10px 0px;
    box-sizing: border-box;  
    border: 2px solid #58B19F;

}

textarea {
    width: 80%;
    height: 50px;
    padding: 15px 22px;
    box-sizing: border-box;
    border: 2px solid #58B19F;
    border-radius: 2px;
    resize: none;  
}

input[type=submit] {
    background-color: #8842d5;
    border: none;
    color: white;
    padding: 8px 36px;
    text-decoration: none;
    border: 2px solid #ccc;
    margin: 5px 4px;
    cursor: pointer;  

}


Contact.js Component Source Code


import React from 'react';
import Form from './Form';
import './Contactstyle.css';


const Contact = () => {

return (
<div className="contactstyle">
<h2> Welcome to Contact page. </h2>
<br/>
<Form />
</div>
)
}


export default Contact;

12 comments:

  1. Sir Form reseved kese hoga mail par

    ReplyDelete
  2. can u show us index.js code??????????

    ReplyDelete
  3. you can take it from Router tutorial
    https://www.thapatechnical.com/2019/05/react-router-tutorial-in-one-video-in.html

    Just add component in index.js

    ReplyDelete
  4. I want to change state of value inside an object, the state is like
    this.state = {
    inpObj: {name:''},
    list : [],
    };
    Can you please help me

    ReplyDelete
  5. bro.. https://www.thapatechnical.com/2019/05/reactjs-forms-in-one-video-in-hindi.html (this site) is shaking while scrolling down. fix that and give solution also. even my page also same prblm.

    ReplyDelete
  6. you are great sir... i like your react form videos

    ReplyDelete
  7. setState is not working
    need some help from your end thapa

    ReplyDelete
  8. Hi,
    I am unable to add
    in vscode as after entering
    the content is not moving to another line .

    Please help me out with this

    ReplyDelete
  9. Hi,
    I am unable to add
    in vscode as after entering
    the content is not moving to another line .

    Please help me out with this

    ReplyDelete
  10. please upload project file by doing it zip file and them make it downloadable

    ReplyDelete
  11. I like the valuable info in your articles. I'll bookmark your blog and check again here regularly. I'll learn plenty of new stuff right here! Best of luck for the next! Regards
    nodejs software developers

    ReplyDelete