By definition, every interactive web application needs some type of user inputs to let users interact with the web application.
Different web frameworks approach events differently. React has its unique approach that correlates with overall principles of the library.
In this article, you will learn about different types of inputs and how to manage them in React. Knowing the ‘React’ way will help you implement a consistent web application design and avoid unnecessary errors.
Different types of Input elements in React
Overall, React uses the same foundational building blocks as normal HTML. Common elements like <div>, <button> and such work exactly the same way in JSX as they do in HTML. There are small differences in attributes but elements mostly work the same.
So if you’re familiar with input elements in HTML, you also know all the basic types in React – checkbox, radio, select dropdown, and input fields, most common of them all.
Still, here’s a quick overview of different types of inputs in React:
Checkbox – an input value with a Boolean state – selected or not selected. Actually, checkbox elements have a checked property that is true or false. SyntheticEvent passed to the event handler contains this information, as well as other useful details about the event and DOM element involved in the event.
Radio buttons are a group of inputs where users can select only one from the group.
Select inputs are similar, but instead of clickable radio buttons, users click on the dropdown to see available options and choose one. Event handlers also work differently for radio buttons and select dropdowns in React. Setting default option for select dropdowns is a useful feature to improve UX of your app.
Finally, text inputs are the most common types of inputs in React. They allow users to enter any value in a text format. Developers can change the type of inputs to enter numbers and other values instead. Or use the textarea element instead.
Forms often contain a combination of different types of inputs. This guide explains how to empty form after submit in react.
What are controlled inputs
Input elements maintain their own state. For example, a checkbox keeps track of its current status – whether it is selected or not. However, React has its own additional layer of virtual DOM built on top of the normal DOM. State is the key to keeping consistency between virtual and actual DOM. This is why React recommends to store all input values in the state.
In short, input elements that get their value from the state are called controlled inputs. Name makes sense because state ‘controls’ values in every field. On the other hand, input elements also need some way to update the state. Otherwise state values will never change and by extension, input elements will get stuck with same static value. That’s where onChange event handlers come in.
Every time an onChange event handler sees that user enters or deletes a character from the field, change event occurs, which updates the state to show the latest value. Changes in the state trigger an update, so the input field starts to show the latest change.
As you can see, onChange plays a crucial role in managing input fields in React.
SyntheticEvent
SyntheticEvent object is another important piece of the puzzle. It contains details about the input element and the event. For example, you can access value in the text input field on e.target.value. e is simply a placeholder that represents SyntheticEvent.
Every event triggers an event. If the event handler is set on the element, the function receives SyntheticEvent object. It’s possible to pass additional arguments, but requires a workaround.
onChange for different types of inputs
When working with a text field, a simple onChange event handler is necessary to update the state. You can access value on e.target.value. If you need to add more lines to the function, it’s better to define the function outside JSX.
If you’re working with a checkbox, you need to work with the checked property in the SyntheticEvent. Radio buttons require a different approach. You need to compare current selected value with value of the radio button.
Select dropdowns are similar to input fields, except you have a <select> element with multiple <option> elements. onChange needs to be set on the <select> element. If you have multiple elements to select, SyntheticEvent selectedOptions property equal to an array of selected values. You can store array of values in the state.
Top comments (0)