Handling forms is about how you handle the data when it changes value or gets submitted. In HTML, form data is usually handled by the DOM. In React, form data is usually handled by the components. When the data is handled by the components, all the data is stored in the component state .
Just like in HTML, React uses forms to allow users to interact with the web page.
Adding Forms in React
You add a form with React like any other element:
Example: Add a form that allows users to enter their name:
Handling forms is about how you handle the data when it changes value or gets submitted.
In HTML, form data is usually handled by the DOM.
In React, form data is usually handled by the components.
When the data is handled by the components, all the data is stored in the component
You can control changes by adding event handlers in the
In HTML, form elements such as
<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
We can combine the two by making the React state be the “single source of truth”. Then the React component that renders a form also controls what happens in that form on subsequent user input. An input form element whose value is controlled by React in this way is called a “controlled component”.
You must initialize the
state in the constructor method before you can use it.
You get access to the field value by using the
With a controlled component, the input’s value is always driven by the React state. While this means you have to type a bit more code, you can now pass the value to other UI elements too, or reset it from other event handlers.
Handling single Input or Multiple Inputs
You can control the values of more than one input field by adding a
name attribute to each element.
When you initialize the state in the constructor, use the field names.
To access the fields in the event handler use the
To update the state in the
this.setState method, use square brackets [bracket notation] around the property name.
Example: Write a form with two input fields
The textarea Tag
The textarea element in React is slightly different from ordinary HTML.
In HTML the value of a textarea was the text between the start tag
<textarea> and the end tag
</textarea>, in React the value of a textarea is placed in a value attribute:
The select Tag
<select> creates a drop-down list. For example, this HTML creates a drop-down list of flavors.
React, instead of using this selected attribute, uses a value attribute on the root select tag. This is more convenient in a controlled component because you only need to update it in one place.
Example: A simple select box, where the selected value “Volvo” is initialized in the constructor:
You can control the submit action by adding an event handler in the onSubmit attribute.
Example: Add a submit button and an event handler in the
It can sometimes be tedious to use controlled components, because you need to write an event handler for every way your data can change and pipe all of the input state through a React component. This can become particularly annoying when you are converting a preexisting codebase to React, or integrating a React application with a non-React library. In these situations, you might want to check out uncontrolled components, an alternative technique for implementing input forms.