Warning: session_start(): open(/tmp/sess_8c5f9eae51092fd8e73de2ea21ff681a, O_RDWR) failed: Disk quota exceeded (122) in /home/wvyrfnwn/learnshareit.com/wp-content/plugins/learnpress/inc/class-lp-page-controller.php on line 1007

Warning: session_start(): Failed to read session data: files (path: /tmp) in /home/wvyrfnwn/learnshareit.com/wp-content/plugins/learnpress/inc/class-lp-page-controller.php on line 1007

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 719

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 719

Warning: ftp_mkdir() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 562

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230
How to submit a form using the Enter key in React.js? - LearnShareIT

How to submit a form using the Enter key in React.js?

Submit a form using the Enter key in React.js

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:

Leave a Reply

Your email address will not be published. Required fields are marked *