We will give you some methods to submit a form using the Enter key in React.js. You can use onSubmit
in <form>
or useEffect
hook to do it. Let’s take a look at each method in detail.
Submit a form using the Enter key in React.js
Let’s talk about the submit form event in Javascript. This event helps you control the user’s submits form action when they click the submit button.
When sending data to the server, we often have to check whether the data format that the user enters is appropriate or not. This helps reduce the load on the server side in some cases.
Create a form in HTML with the <form>
tag. The form action
attribute assigns the send data address; the method
attribute is the method to send the data; and the tags create control elements in the form such as <input>
, <button>
tags, Submit button to submit data in HTML FORM.
Code:
<form method="post" action="" onSubmit={handleSubmit}> ... </form>
The basic <form>
tag has two attributes to keep in mind: action
and method
.
- The
action
attribute: The attribute to set the URL that will receive the data is the address that the form data is sent to (submit to, post to). Without this parameter, the action equals the URL you are accessing (i.e: Sending form information to the server according to the address you are accessing). The web server receives data, processes it, and returns something. - The
method
attribute: Property to set HTTP method. See also HTTP Request Message usually has a value of ‘get’ or ‘post’. If this property is not written, the default method of the form is ‘get’.
Use ‘onSubmit‘ in <form>
In this method, we will use Javascript’s built-in onSubmit
to catch the forms submit event. So every time we edit the input and press Enter key, the program will catch the submit event. Because the program has preset Enter for this event.
Code:
import React, { useState } from "react"; export default function App() { const [state, setState] = useState(""); function handleSubmit() { console.log("submit"); } function handleChange(e) { setState(e.target.value); } return ( <div> <h1>LearnShareIT</h1> <form onSubmit={handleSubmit}> <label> Name: <input type="text" value={state} onChange={handleChange} /> </label> <input type="submit" value="Submit" /> </form> </div> ); }
So in the example above, we could submit the form by pressing Enter. But if it doesn’t work for you, you can move on to the next method.
Use ‘useEffect‘ hook method
In this way, we will use the useEffect
hook to catch the onkeydown
event of the program. After that, we compare that key value with the ‘Enter’ value to determine if it is the button. Please take a look at the code below to understand how it works
Code:
import React, { useEffect, useState } from "react"; export default function App() { const [state, setState] = useState(""); useEffect(() => { const listener = (event) => { if (event.code === "Enter") { // Where you submit the form console.log("LearnShareIT form submit"); } }; document.addEventListener("keydown", listener); }, []); function handleChange(e) { setState(e.target.value); } return ( <div> <h1>LearnShareIT</h1> <form> <label> Name: <input type="text" value={state} onChange={handleChange} /> </label> <input type="submit" value="Submit" /> </form> </div> ); }
Output:
So every time we press the Enter button, the program will catch this event and run the submit form function.
Summary
To summarize, some ways to submit a form using the Enter key in React.js have been written in this article. You can use use onSubmit
in <form>
or event.code
method to do this action. Thank you for reading!
Maybe you are interested:
- Combine multiple inline Style objects in React
- Export multiple components from a file in React.js
- Set and Access state using a Dynamic key in React
- How To Get An Element By ID In React
Hi, my name’s Nathaniel Kirk. I’m interested in learning and sharing knowledge about programming languages. My strengths are C, C++, Python, HTML, CSS, Javascript, and Reactjs. If you have difficulty with them, don’t worry. I’m here to support you.
Name of the university: PTIT
Major: IT
Programming Languages: C, C++, Python, HTML, CSS, Javascript, Reactjs