Welcome to the React JS Tutorial on the onSubmit Event! In this lesson, we'll learn about the onSubmit event in React, a powerful tool for handling forms and user input. Let's dive right in!
onSubmit Event? 🎯The onSubmit event in React is a special event that gets triggered when a form is submitted. This event is particularly useful for handling form submissions and validating user input.
onSubmit Event? 📝Using the onSubmit event allows us to perform specific actions when a form is submitted, such as sending data to a server, updating the application state, or showing a confirmation message.
onSubmit Event 💡To use the onSubmit event, we need to follow these steps:
id to it.<form id="myForm">
<!-- form fields go here -->
</form>const handleSubmit = (event) => {
// Your code to handle form submission goes here
}onSubmit event to the form and call the handler function.<form id="myForm" onSubmit={handleSubmit}>
<!-- form fields go here -->
</form>Let's create a simple example where we collect a user's name and display a confirmation message when the form is submitted.
class SimpleForm extends React.Component {
constructor(props) {
super(props);
this.state = { name: "" };
}
handleSubmit = (event) => {
event.preventDefault();
alert(`Hello, ${this.state.name}!`);
}
handleChange = (event) => {
this.setState({ name: event.target.value });
}
render() {
return (
<form id="myForm" onSubmit={this.handleSubmit}>
<label>
Name:
<input type="text" value={this.state.name} onChange={this.handleChange} />
</label>
<input type="submit" value="Submit" />
</form>
);
}
}In this example, we'll create a form for user registration and perform validation to ensure the user enters a valid email address and password.
class RegisterForm extends React.Component {
constructor(props) {
super(props);
this.state = {
email: "",
password: "",
errors: { email: "", password: "" }
};
}
handleSubmit = (event) => {
event.preventDefault();
const emailRegex = /\S+@\S+\.\S+/;
const passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{6,}$/;
const errors = { email: "", password: "" };
if (!emailRegex.test(this.state.email)) {
errors.email = "Please enter a valid email address.";
}
if (!passwordRegex.test(this.state.password)) {
errors.password = "Password must contain at least one lowercase letter, one uppercase letter, one digit, and be at least 6 characters long.";
}
this.setState({ errors });
if (Object.values(this.state.errors).every(error => !error)) {
// Successful registration, handle data submission here.
}
}
handleChange = (event) => {
this.setState({ [event.target.name]: event.target.value });
}
render() {
return (
<form id="registerForm" onSubmit={this.handleSubmit}>
<label>
Email:
<input
type="text"
name="email"
value={this.state.email}
onChange={this.handleChange}
/>
{this.state.errors.email && (
<span className="error">{this.state.errors.email}</span>
)}
</label>
<label>
Password:
<input
type="password"
name="password"
value={this.state.password}
onChange={this.handleChange}
/>
{this.state.errors.password && (
<span className="error">{this.state.errors.password}</span>
)}
</label>
<input type="submit" value="Register" />
</form>
);
}
}Which event is triggered when a form is submitted in React?
That's it for our lesson on the onSubmit event in React! By now, you should have a solid understanding of how to handle form submissions and perform validation in React. Happy coding! 🚀