The most basic way of working with forms in React is to use what are referred to as \u201cuncontrolled\u201d form inputs. What this means is that React doesn\u2019t track the input\u2019s state. HTML input elements naturally keep track of their own state as part of the DOM, and so when the form is submitted we have to read the values from the DOM elements themselves.<\/p>\n
In order to do this, React allows us to create a \u201cref\u201d (reference) to associate with an element, giving access to the underlying DOM node. Let\u2019s see how to do this:<\/p>\n
class SimpleForm extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n \/\/ create a ref to store the DOM element\r\n this.nameEl = React.createRef();\r\n this.handleSubmit = this.handleSubmit.bind(this);\r\n }\r\n\r\n handleSubmit(e) {\r\n e.preventDefault();\r\n alert(this.nameEl.current.value);\r\n }\r\n\r\n render() {\r\n return (\r\n <form onSubmit={this.handleSubmit}>\r\n <label>Name:\r\n <input type=\"text\" ref={this.nameEl} \/>\r\n <\/label>\r\n <input type=\"submit\" name=\"Submit\" \/>\r\n <\/form>\r\n )\r\n }\r\n}\r\n<\/code><\/pre>\nAs you can see above, for a class-based component you initialize a new ref in the constructor by calling React.createRef<\/strong>, assigning it to an instance property so it\u2019s available for the lifetime of the component.<\/p>\nIn order to associate the ref <\/strong>with an input, it\u2019s passed to the element as the special ref attribute. Once this is done, the input\u2019s underlying DOM node can be accessed via this.nameEl.current<\/strong>.<\/p>\nLet\u2019s see how this looks in a functional component:<\/p>\n
function SimpleForm(props) {\r\n const nameEl = React.useRef(null);\r\n\r\n const handleSubmit = e => {\r\n e.preventDefault();\r\n alert(nameEl.current.value);\r\n };\r\n\r\n return (\r\n <form onSubmit={handleSubmit}>\r\n <label>Name:\r\n <input type=\"text\" ref={nameEl} \/>\r\n <\/label>\r\n <input type=\"submit\" name=\"Submit\" \/>\r\n <\/form>\r\n );\r\n}\r\n<\/code><\/pre>\nThere\u2019s not a lot of difference here, other than swapping out createRef <\/strong>for the useRef <\/strong>hook.<\/p>\nExample: login form<\/strong><\/p>\nfunction LoginForm(props) {\r\n const nameEl = React.useRef(null);\r\n const passwordEl = React.useRef(null);\r\n const rememberMeEl = React.useRef(null);\r\n\r\n const handleSubmit = e => {\r\n e.preventDefault();\r\n\r\n const data = {\r\n username: nameEl.current.value,\r\n password: passwordEl.current.value,\r\n rememberMe: rememberMeEl.current.checked,\r\n }\r\n\r\n \/\/ Submit form details to login endpoint etc.\r\n \/\/ ...\r\n };\r\n\r\n return (\r\n <form onSubmit={handleSubmit}>\r\n <input type=\"text\" placeholder=\"username\" ref={nameEl} \/>\r\n <input type=\"password\" placeholder=\"password\" ref={passwordEl} \/>\r\n <label>\r\n <input type=\"checkbox\" ref={rememberMeEl} \/>\r\n Remember me\r\n <\/label>\r\n <button type=\"submit\" className=\"myButton\">Login<\/button>\r\n <\/form>\r\n );\r\n}\r\n<\/code><\/pre>\nView on CodePen<\/a><\/p>\nWhile uncontrolled inputs work fine for quick and simple forms, they do have some drawbacks. As you might have noticed from the code above, we have to read the value from the input element whenever we want it. This means we can\u2019t provide instant validation on the field as the user types, nor can we do things like enforce a custom input format, conditionally show or hide form elements, or disable\/enable the submit button.<\/p>\n
Fortunately, there\u2019s a more sophisticated way to handle inputs in React.<\/p>\n
2. Controlled Inputs<\/h2>\n
An input is said to be \u201ccontrolled\u201d when React is responsible for maintaining and setting its state. The state is kept in sync with the input\u2019s value, meaning that changing the input will update the state, and updating the state will change the input.<\/p>\n
Let\u2019s see what that looks like with an example:<\/p>\n
class ControlledInput extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = { name: '' };\r\n this.handleInput = this.handleInput.bind(this);\r\n }\r\n\r\n handleInput(event) {\r\n this.setState({\r\n name: event.target.value\r\n });\r\n }\r\n\r\n render() {\r\n return (\r\n <input type=\"text\" value={this.state.name} onChange={this.handleInput} \/>\r\n );\r\n }\r\n}\r\n<\/code><\/pre>\nAs you can see, we set up a kind of circular data flow: state to input value, on change event to state, and back again. This loop allows us a lot of control over the input, as we can react to changes to the value on the fly. Because of this, controlled inputs don\u2019t suffer from the limitations of uncontrolled ones, opening up the follow possibilities:<\/p>\n
instant input validation:<\/strong> we can give the user instant feedback without having to wait for them to submit the form (e.g. if their password is not complex enough)
\ninstant input formatting:<\/strong> we can add proper separators to currency inputs, or grouping to phone numbers on the fly
\nconditionally disable form submission:<\/strong> we can enable the submit button after certain criteria are met (e.g. the user consented to the terms and conditions)
\ndynamically generate new inputs:<\/strong> we can add additional inputs to a form based on the user\u2019s previous input (e.g. adding details of additional people on a hotel booking)<\/p>\nValidation<\/h2>\n
As I mentioned above, the continuous update loop of controlled components makes it possible to perform continuous validation on inputs as the user types. A handler attached to an input\u2019s onChange event will be fired on every keystroke, allowing you to instantly validate or format the value.<\/p>\n
Example: credit card validation<\/h3>\n
Let\u2019s take a look at a real-word example of checking a credit card number as the user types it into a payment form.<\/p>\n