Updated March 28, 2023
Introduction to React Uncontrolled Input
In react js, uncontrolled inputs are the input fields that do not rely on the states, and they can do and control the value of the input with the help of the ref and with the name of the attributes. For example, if we have some user forms and the form contains some input fields, then the changes on the input form will be captured with the name of the attribute or with the help of the ref tag of html. Therefore, in react js, we should only use the concept of the uncontrolled input if it needed because this avoids the concept of controlling with the states.
Components of React Uncontrolled Input
In the below, we have given some of the examples for controlling form. We have mentioned how to capture the input value. Before going to a deeper understanding of the react uncontrolled input, we need to understand its uses. We already have controlled input, so why do we need an uncontrolled input? Suppose we have some inputs, and for each input value, we will be required to manage the states. And one important thing we need to understand is that maintaining the states and rendering the component for each change is a costlier task so we do it in another way with the help of using ref, which allows us to handle input without dealing with many states. But this approach is a dom-manipulation way because we are trying to get the value of the input with the help of the dom changes, which means costly operations.
So, we can understand there are situations where we can use uncontrolled input.
Examples of React Uncontrolled Input
In case if we want to execute the below example, then we can combine the html and react javascript code part and open it on any browser, and we can see the output as I have given on the screen in the below examples.
Example #1
In this example, we are trying to capture the input and, at the time of form submit taking the value of input from the reference of the name of the input.
Please see the below example, along with the screen of the output.
Code:
class Example extends React.Component {
//Constructor for initialization of the states of the components
constructor(props) {
super(props);
//binding the function so that accessible with this.function name
this.manageFormSubmit = this.manageFormSubmit.bind(this);
//Creating the react input dom with the createRef function
this.inputValue = React.createRef();
}
//Function to capture the input field and submit the form to the server
manageFormSubmit(e) {
let name =this.inputValue.current.value
//Call the submit form with name value
e.preventDefault();
}
render() {
//CSS style for designing of the form, we can add as many as CSS attribute as we want
let formStyle ={
backgroundColor:"red",
align:"center"
}
return (
<form style={formStyle} onSubmit={this.manageFormSubmit}>
<label>
User Name:
<input className="uncontrolled-class" type="text" ref={this.inputValue} />
</label>
<input type="submit" value="Add User" />
</form>
);
}
}
//The main work where we are attaching the component with the html for view purposes
ReactDOM.render(
<Example />,
document.getElementById('main')
);HTML ,
Below is the HTML code which will handle and play the role for displaying the value for the react component which we have created above
<div id="main"></div>Screen,
Output:
Example #2
In the below example, we are capturing the value of the input and presenting the same value on the h1 html tag.
Please see the below example, along with the screen of the output.
Code:
var Example = React.createClass({
//Function used to get the initial value for the form input
getInitialState: function() {
return { inputvalue: "Uncontrolled Input" };
},
manageOnchange: function(e) {
this.setState({
inputvalue: e.target.value
});
},
render: function() {
//CSS style for designing of the form, we can add as many as CSS attribute as we want
let uncontrolledForm ={
backgroundColor:"red"
}
return (
<form className="uncontrolled-form">
<div>
<label>
Capturing the uncontrolled input
<h1 style={uncontrolledForm}>{this.state.inputvalue}</h1>
</label>
</div>
<div className="uncontrolled-div">
<label className="uncontrolled-lebel">
Enter value for uncontrolled input:
<input name="msg" defaultValue={this.state.inputvalue}
onChange={this.manageOnchange} />
</label>
</div>
</form>
);
}
});
//The main work where we are attaching the component with the html for view purposes
var originalElement = React.createElement(Example);
ReactDOM.render(originalElement, document.querySelector("root"));HTML,
Below is the html code which will handle and play the role for displaying the value for the react component which we have created above
<root></root>Screen,
Below is the image where we are capturing the input value and displaying the same text message on the other html tag
Output:
Example #3
An example with file input as the uncontrolled input field.
Please see the below example, along with the screen of the output.
Code:
class Example extends React.Component {
//Constructor for initialization of the states of the components
constructor(props) {
super(props);
//binding the function so that accessible with this.function name
this.manageSubmit = this.manageSubmit.bind(this);
//Creating the react input dom with the createRef function
this.inputValue = React.createRef();
}
manageSubmit(e) {
e.preventDefault();
let file =this.inputValue.current.files[0].name
//upload file on server
}
render() {
let uncontrolledForm ={
backgroundColor:"red"
}
return (
<form style={uncontrolledForm} onSubmit={this.manageSubmit}>
<label>
Upload file:
<input classNmae="uncontrolled=input"type="file" ref={this.inputValue} />
</label>
<br />
<button classNmae="Upload-class" type="submit">Upload File</button>
</form>
);
}
}
//The main work where we are attaching the component with the html for view purposes
ReactDOM.render(
<Example />,
document.getElementById('main')
);HTML,
Below is the html code which will handle and play the role for displaying the value for the react component which we have created above
<div id="main"></div>Screen,
Below is an example where we are handling the file input with the help of ref as the uncontrolled input; we can select the input file and upload the selected input value by capturing it with the help of the ref name of the input field.
Output:
Conclusion
From this tutorial, we learned the basics of uncontrolled input; we learned about the importance and situations where we can use the concept of uncontrolled input. We also learned the working and uses with the help of some of the important examples.
Recommended Articles
This is a guide to React Uncontrolled Input. Here we discuss the Components of React Uncontrolled Input and Examples along with the codes and outputs. You may also have a look at the following articles to learn more –
