Beginning ReactJS Foundations Building User Interfaces with ReactJS

8Forms

HTML form elements are what make it possible for web applications to gather user input. React has built-in HTML DOM components that create native HTML form elements. The built-in React components that create HTML form elements behave somewhat differently from native HTML form elements in some important ways, however. In this chapter, you'll learn:

• How to use form components in React with one-way data flow.
• The difference between controlled and uncontrolled form inputs.
• How and why to prevent a form's default action.
• How to use each of React's form elements.
• How to retrieve and use data from a form.

FORMS HAVE STATE

Form elements in HTML are unique in that they maintain their own internal state. When you type into a text input or check a checkbox or select something from a dropdown menu, it changes the internal state of the element.

For example, in an HTML input element, this state is kept in the value attribute and in a checkbox element, the state is kept in a Boolean attribute named checked. It's possible in HTML for the internal state of a form element to be set either by a person interacting with the form (typing into it or checking boxes, for example) or by changing the value of the attribute that determines the state.

If you've been paying close attention, you'll recognize this default behavior of HTML forms as two-way data flow, which is generally discouraged in React. Ideally, everything that changes in a React user interface should be the result of changes ...