In most of the Application, your a going to take user input at some point in time.
So, Let's create a simple Login Form.
function NewsLetterForm() {
return (
<form onSubmit={handleSubmit}>
<input
type="email"
name="email"
placeholder="Enter your email address"
/>
<input
type="password"
name="password"
placeholder="Enter your password"
/>
<button type="submit">Login</button>
</form>
)
}
When you submit this form the browser by default makes a GET request to the current URL with values of the form as a Query Parameter in URL and it's causing a full-page reload.
http://localhost:3000/exampe1.html?email=bipin%40gmail.com
You can prevent this behavior by calling the event.preventDefault() method.
function NewsLetterForm() {
const handleSubmit = event => {
event.preventDefault()
}
return (
<form onSubmit={handleSubmit}>
<input
type="email"
name="email"
placeholder="Enter your email address"
/>
<input
type="password"
name="password"
placeholder="Enter your password"
/>
<button type="submit">Login</button>
</form>
)
}
The event Object is not an actual DOM event but looks and behaves like a real DOM event. You can also access the native DOM event by using the event.nativeEvent property.
React does this to increase the performance of the Application.
Let's access the values of the input filed.
There are several ways to access the value of the input.
Via their index:
event.target.elements[0].valueVia the elements object by their name or id attribute:
event.target.elements.email.value
function NewsLetterForm() {
const handleSubmit = event => {
event.preventDefault()
const email = event.target.elements.email.value;
const password = event.target.elements.password.value;
alert(`Your email is ${email} and password is ${password}`)
}
return (
<form onSubmit={handleSubmit}>
<input
type="email"
name="email"
placeholder="Enter your email address"
/>
<input
type="password"
name="password"
placeholder="Enter your password"
/>
<button type="submit">Submit</button>
</form>
)
}
Example 1
Let's validate the password field to meet the following criteria.
- must be at least 8 characters
- must contain a capital letter
- must contain a number
- must contain a special character
We need two things to archive the above functionalities.
A variable to store the value of the input and an updater function to update the value of the variable whenever the user changes the value of the input.
A change handler (
onChange).
In React we have a hook (kinda method) called useState which takes the initial value and returns an array.
We are going to talk about hooks in the next series.
function Counter() {
// password is variable and setPassword is updater function
const [password, setPassword] = React.useState('')
return null;
}
In React, there an event handler called onChange which fires when the user changes the value of the input field.
function Counter() {
// password is variable and setPassword is updater function
const [password, setPassword] = React.useState('')
const handleChange = event => setPassword(event.target.value)
return (
<input
type="password"
name="password"
value={password}
placeholder="Enter your password"
onChange="{handleChange}"
/>
)
}
Example 2
I hope you learned something from this article and if you have any doubts, please leave a comment. I will be delighted to answer all of your questions.
My name is Bipin Rajbhar and I am a software engineer at QuikieApps, and you can follow or connect to me on Twitter and Linked In
Resources
The Beginner's Guide to React
Epic React
Top comments (0)