How to create a form in react?
React 16.8 added new features in his library as Hooks. Where we will use “use” keyword then it’s
indicate that this hook of the react as “useState()”, “useRef()” etc and not
required that create state full component you can use the stateless
component as
given below example.
React get form values on submit:
Need to create a new project because the need to
update react version 16.8 or you can update only “node_modules” then you will
find a newly updated library of the hooks. Now I am creating some form using react
hooks Or without Hooks.
Form with useState():
import React, {useState} from 'react'
export default () => {
const [fName, setfName] = useState('');
const [lName, setlName] = useState('');
const [phone, setPhone] = useState('');
const [email, setEmail] = useState('');
const submitValue = () => {
const frmdetails = {
'First
Name' : fName,
'Last
Name' : lName,
'Phone' : phone,
'Email' : email
}
console.log(frmdetails);
}
return(
<>
<hr/>
<input type="text" placeholder="First Name" onChange={e => setfName(e.target.value)} />
<input type="text" placeholder="Last Name" onChange={e => setlName(e.target.value)} />
<input type="text" placeholder="Phone" onChange={e => setPhone(e.target.value)} />
<input type="text" placeholder="Email" onChange={e => setEmail(e.target.value)} />
<button onClick={submitValue}>Submit</button>
</>
)
}
Form with useState() in dynamic key:
import React,{useState} from "react"
// import axios from "axios";
export default () => {
const [inputText, setInputText] = useState({
exerciseName: "",
lName: "",
phone: "",
email: ""
})
const handleChange = (e)=>{
const value = e.target.value;
setInputText({...inputText,
[e.target.name]: value});
}
const submitValue = () => {
const frmdetails = inputText;
console.log(frmdetails);
// axios({
// method: 'post',
// url:
'http://localhost:3005/addCategories',
// data: frmdetails,
// headers: {
// // 'Authorization':
`yourcompany ${token}`,
// 'Content-Type': 'application/json'
// },
// })
}
return (
<>
<h1>My Form</h1>
<input type="text" name="exerciseName" placeholder="Add Exercise" value={inputText.exerciseName} onChange={handleChange} />
<input type="text" name="lName" placeholder="Last Name" value={inputText.lName} onChange={handleChange} />
<input type="text" name="phone" placeholder="Phone" value={inputText.phone} onChange={handleChange} />
<input type="text" name="email" placeholder="Email" value={inputText.email} onChange={handleChange} />
<button onClick={submitValue}>Submit</button>
</>
)
}
Form with State Full Component:
import React, {Component} from 'react'
export default class Formstatefull extends Component{
state = {
userName:"",
userEmail:"",
userPhone: ""
}
pushDetails = (evt) => {
if(evt.target.id === "userName"){
this.setState({userName: evt.target.value})
}
else if(evt.target.id === "userEmail"){
this.setState({userEmail:evt.target.value})
}
else if(evt.target.id === "userPhone"){
this.setState({userPhone: evt.target.value})
}
}
submitData = () =>{
let userDetails = {
name: this.state.userName,
email: this.state.userEmail,
phone: this.state.userPhone
}
console.log(userDetails)
}
render(){
return(
<>
<table cellPadding="5">
<tbody>
<tr>
<td>Name: </td>
<td><input type="text" id="userName" value={this.state.userName} onChange={this.pushDetails} /></td>
</tr>
<tr>
<td>Email: </td>
<td><input type="text" id="userEmail" value={this.state.userEmail} onChange={this.pushDetails} /></td>
</tr>
<tr>
<td>Phone No.: </td>
<td><input type="text" id="userPhone" value={this.state.userPhone} onChange={this.pushDetails } /></td>
</tr>
<tr>
<td></td>
<td><button onClick={this.submitData}> Save</button></td>
</tr>
</tbody>
</table>
</>
)
}
}
Form with State Full Component in switch():
import React, {Component} from 'react'
export default class StatefullSwitchForm extends Component{
state = {
name:"",
email:"",
phone: ""
}
getData = (evt) => {
switch(evt.target.id){
case "nameId":
this.setState({name:evt.target.value})
break;
case "emailId":
this.setState({email:evt.target.value})
break;
case "phoneId":
this.setState({phone:
evt.target.value})
break;
}
}
submitDetails = () =>{
let userInfo = {
name: this.state.name,
email: this.state.email,
phone: this.state.phone
}
console.log(userInfo)
}
render(){
return(
<>
<h3>Contact Us</h3>
<h4>With State Full
Component and Use Switch</h4>
<table cellPadding="5">
<tbody>
<tr>
<td>Name: </td>
<td><input type="text" id="nameId" value={this.state.name} onChange={this.getData} /></td>
</tr>
<tr>
<td>Email: </td>
<td><input type="text" id="emailId" value={this.state.email} onChange={this.getData} /></td>
</tr>
<tr>
<td>Phone No.: </td>
<td><input type="text" id="phoneId" value={this.state.phone} onChange={this.getData} /></td>
</tr>
<tr>
<td></td>
<td><button onClick={this.submitDetails}> Save</button></td>
</tr>
</tbody>
</table>
</>
)
}
}
Form with useRef():
import React, {useRef} from 'react'
export default () => {
const fName = useRef();
const email = useRef();
const phone = useRef();
const submitDetails = () =>{
let userInfo = {
name: fName.current.value,
email: email.current.value,
phone: phone.current.value
}
console.log(userInfo)
}
return(
<>
<h3>Contact Us</h3>
<h4>React form with useRef()</h4>
<table cellPadding="5">
<tbody>
<tr>
<td>Name: </td>
<td><input type="text" ref={fName} id="userName" /></td>
</tr>
<tr>
<td>Email: </td>
<td><input type="text" ref={email} id="userEmail" /></td>
</tr>
<tr>
<td>Phone No.: </td>
<td><input type="text" ref={phone} id="userPhone" /></td>
</tr>
<tr>
<td></td>
<td><button onClick={submitDetails}> Save</button></td>
</tr>
</tbody>
</table>
</>
)
}
Note:
export default (): export default
means you can give name your component as you wish. import CostomComponentName from './view/formHooks/formhooksNew'
No comments:
Note: Only a member of this blog may post a comment.