Chapter 7. Working with forms in React
This chapter covers
- Defining forms and form elements
- Capturing data changes
- Using references to access data
- Alternative approaches for capturing user-input data from form elements
- Setting default values for form elements
Thus far, you’ve learned about events, states, component composition, and other important React topics, features, and concepts. But aside from capturing user events, I haven’t covered how to capture text input and input via other form elements like input, textarea, and option. Working with them is paramount to web development, because they allow your applications to receive data (such as text) and actions (such as clicks) from users.
This chapter refers to pretty much everything I’ve covered so far. You’ll begin to see how everything fits together.
Note
The source code for the examples in this chapter is at www.manning.com/books/react-quickly and https://github.com/azat-co/react-quickly/tree/master/ch07 (in the ch07 folder of the GitHub repository https://github.com/azat-co/react-quickly). You can also find some demos at http://reactquickly.co/demos.
In regular HTML, when you’re working with an input element, the page’s DOM maintains that element’s value in its DOM node. It’s possible to access the value via methods like document.getElementById('email').value or by using jQuery methods. In essence, the DOM is your storage.