In this article, you will find the method to type the onSubmit event in React and TypeScript. We will show you how to use React.FormEvent<HTMLFormElement> to do this. Read this article to the end for more detailed information.
Type the onSubmit event in React and TypeScript
In React and TypeScript, the FormEvent interface is used for onSubmit events. Hence, we can use the ‘React.FormEvent<HTMLFormElement>’ to type the onSubmit event.
It is very easy to check for the event type. You write the event inline, then hover on the event object. A message will appear, and you can see the event object type is React.FormEvent <HTMLFormElement>.
import React, {useState} from 'react'; const Demo = () => { const [message, setMessage] = useState(''); return ( <div className='container'> {/* write the event handler inline */} <form id='myFormID' className='myFormClassName' onSubmit={event => console.log(event)}> <b className='title'><label>Enter your message</label></b> <input type="text" id="message" name="message" value={message} onChange={event => setMessage(event.target.value)} /> <button className='btn btn-primary' type="submit">Submit</button> </form> </div> ); }; export default Demo;
TypeScript can infer the type of the event itself when we write it inline. This method is advantageous. It can be applied not only to the onSubmit event but also to all other events.
When you already know what exactly is the type of the event, you can extract your handler function and type its exact type. Take a look at the following example:
import React, {useState} from 'react'; const Demo = () => { const [message, setMessage] = useState(''); // Type event as React.FormEvent<HTMLFormElement> const handleOnSubmitEvent= (event: React.FormEvent<HTMLFormElement>) => { // Prevent page refresh event.preventDefault(); // Access properties console.log(event.currentTarget.id); console.log(event.currentTarget.className); console.log(event.currentTarget.childElementCount); }; return ( <div className='container'> <form id='myFormID' className='myFormClassName' onSubmit={handleOnSubmitEvent}> <b className='title'><label>Enter your message</label></b> <input type="text" id="message" name="message" value={message} onChange={event => setMessage(event.target.value)} /> <button className='btn btn-primary' type="submit">Submit</button> </form> </div> ); }; export default Demo;
Output:
In the above example, we create the function ‘handleOnSubmitEvent’, whose input parameter is an event object of type ‘React.FormEvent<HTMLFormElement’. The PreventDefault() method is used to avoid reloading the page every time the user submits the form.
At this point, you can access the properties of the element that is attached to the event through the ‘currentTarget’ property. Like in this example, we have access to properties like: ‘id’, ‘className’, and ‘childElementCount’ of the object that fired the event. You can practice by accessing the properties you want and printing them on the console.
Summary
To sum up, we just showed you how to use React.FormEvent<HTMLFormElement> to type the onSubmit event in React and TypeScript. Hopefully, the above information is helpful for you. Thanks for reading the whole post.
Maybe you are interested:
My name’s Christopher Gonzalez. I graduated from HUST two years ago, and my major is IT. So I’m here to assist you in learning programming languages. If you have any questions about Python, JavaScript, TypeScript, Node.js, React.js, let’s contact me. I will back you up.
Name of the university: HUST
Major: IT
Programming Languages: Python, JavaScript, TypeScript, Node.js, React.js