I am following a reactJS tutorial series and I am confused about the difference between finding the input tags value vs having an input ref='thing' in ReactJS for form handling.
For example...
<input id='user' name='username'/>
vs
<input id='user' ref='username'/>
is there any difference between doing:
formHandleFunction(){
//handle document.getElementById('user').value;
}
vs
formHandleFunction(){
//handle this.refs.username.value;
}
Typically we use 'value' with a controlled component and 'ref' with an uncontrolled component.
From FB Documentation:
In most cases, we recommend using controlled components to implement forms. In a controlled component, form data is handled by a React component. The alternative is uncontrolled components, where form data is handled by the DOM itself.To write an uncontrolled component, instead of writing an event handler for every state update, you can use a ref to get form values from the DOM.
Go through these links to get a better understanding.
