Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is the use of the <form> tag necessary in ReactJS that have HOC input tags that handle form-esque events and behaviour?

Tags:

reactjs

The use of the form tag seems redundant especially in SPAs where the default action of refreshing the page is more of a hindrance than a feature: why include a tag only to have to write e.preventDefault() to prevent its default behaviour every time it is used?

Any form behaviour can be handled with a combination input tags, local component/application state and methods.

Form submission can be handled from handlers on inputs/controlled inputs themselves that in turn call some central form submission method.

I have tried this when creating a dynamic form component (inputs and types are built from an object dynamically) with no obvious downsides.

My question is: Given a situation where input tags are configured as HOCs whose events such as onChange, onClick and onKeydown handle the majority of events (like form submit's event like submit when the enter key is pressed) and whose value is controlled by state:
Are there any reasons as to why omitting the use of form tags to build a form within ReactJS is a bad idea?

like image 464
Pineda Avatar asked Dec 18 '16 04:12

Pineda


People also ask

Is form tag necessary in React?

Using a <form> tag gives you automatic form behavior, like form submission when pressing Enter when an input has focus. There is zero benefit from avoiding a form tag. onEnter could be added by creating a HOC of inputs which is what I've done to manage input state and events.

Why is form tag necessary?

Form Tag is Powerful - On the internet, the most-used tag is form tag; without form tags, the internet would be a read-only repository of boring documentation. You wouldn't even be able to search for anything on the internet without a form tag. So it plays an important role in the web for sending and receiving data.

Do you use forms in React?

Forms are a crucial component of React web applications. They allow users to directly input and submit data in components ranging from a login screen to a checkout page.

What are the tags between which a form can be added in React?

In HTML, form elements such as <input> , <textarea> , and <select> typically maintain their own state and update it based on user input. In React, mutable state is typically kept in the state property of components, and only updated with setState() .


1 Answers

Using a <form> tag gives you automatic form behavior, like form submission when pressing Enter when an input has focus. There is zero benefit from avoiding a form tag.

like image 95
Andy Ray Avatar answered Nov 16 '22 03:11

Andy Ray