Updated April 14, 2023
Introduction to React Controlled Input
In react js control inputs are the input which handles with the help of states and the value of the input captured with the help of any handler function on the input field. For example, if an input field is there and anyone will type anything on the input field, then the value of that input will be captured with the help of function with event change, written on the input, and the function will change the state value and manage. Suppose we are submitting any form; in that case, input will be captured with the current value of the state which affected after typing and state changed and set with onchange function.
What is React Controlled Input Components?
Before understanding the concept of controlled input, we need to understand its importance and why we need it. In normal JavaScript programming, when we submit any form then to get the value of each input field will be done with the help of the name or class and id of the input attribute, for example, if the attribute is <input type=”text” class=”input-class” name =”user” id=”input-id”> , here, we are giving you a simple example of the uncontrolled input because in this case the value of the input will be captured with the name of the input field or with the id or with the name of the class. But in this approach, we can see that we will have to rely on the id class and name of the input fields.
But with the help of the controlled input like <input type=”text” value={this.state.stateName} onChange={this.any function } >, here we are not using any class, name, and any id with the input field. We have used value ={ this.state.stateName} which means that we have taken some state and each time when made any change on the value of the state then the function which we have written for the onclick or onchange will get a call and the state will be changed.Hence when we will submit the form then at that time, the state value will play the role of the input fields. Hence we are not using the attribute like name, id, and class to get the value of the form input; rather, we are using the state values.
In the below, we have given two examples; in the first example, we are displaying an input with the id, class and with the name of the attribute. And when someone wants to use this input, then they can access these inputs with the help of the name, id, and class. Whereas in the second example, we have given an example where we are displaying the input without a name , id, and class instead of we have used the states, and with the help state, we are controlling the input value.
Examples to Implement React Controlled Input
Below are the examples of React Controlled Input:
Example #1
Below is an example where we are controlling the input fields with the help of the name and ref params which makes it uncontrolled input.
Code:
class Example extends React.Component {
HandleSubmit = () => {
//Here we are controlling the input with help of thee name of the input fields
const user = this.user.value;
}
render() {
//CSS style for designing of the form , we can add as many as CSS attribute as we want
let formStyle={
backgroundColor:"yellow"
}
return (
<div style={formStyle}>
//Input fields with the ref as the reference of the input field for controlling with user reference
<input type="text" ref={input =>this.user = input} />
//A function to control the value of the input , this function get called on clicking and we can perform the respective tasks inside the function
<button onClick={this.HandleSubmit}>Enter the name of user</button>
</div>
);
}
}
//Finally creating a complete view and attaching it with id main of the html
ReactDOM.render(
<Example />,
document.getElementById('main')
);HTML,
The html which plays the role of containing or displaying all components of react from above .
<div id="main"></div>Screen,
Below is the screen in which the input is visible , and this input can be controlled with the name and ref or with the id of the input fields .
Output:
Example #2
In this example, we have taken state and function as the attribute to control the input fields instead of using the name and ref as the controlling parameters.
Code:
class Example extends React.Component {
constructor(props) {
super(props);
//Defining the initial state values
this.state = {
isAllowed: true,
totalUser: 3
};
this.manageInputChange = this.manageInputChange.bind(this);
}
manageInputChange(e) {
const t = e.target;
const value = t.type === 'checkbox' ? t.checked : t.value;
const n = t.name;
this.setState({
[n]: value
});
}
render() {
//CSS style for designing of the form, we can add as many as CSS attribute as we want
let formStyle={
backgroundColor:"yellow"
}
return (
<form style={formStyle}>
<label className="lebel-class">
Is user allowed:
//Here input fields are written with the help of the state and functions , instead of using the name and claa like attribute to control the input fields .
<input
name="isAllowed"
type="checkbox"
checked={this.state.isAllowed}
onChange={this.manageInputChange} />
</label>
<br />
<label>
Total number of Users:
<input
name="totalGuestUser"
type="number"
value={this.state.totalUser}
onChange={this.handleInputChange} />
</label>
</form>
);
}
}
//Finally creating a complete view and attaching it with id main of the html
ReactDOM.render(
<Example />,
document.getElementById('main')
);HTML ,
The html which plays the role of containing or displaying all components of react from above.
<div id="main"></div>Screens,
In the below screen, we have taken two controlled inputs; one is the input as the text and another example with input as the checkbox. We have taken the checkbox as the selected, which means the value of the checkbox at the initial time will be checked.
Output:
Conclusion
From this tutorial, we learned the basic concept of the controlled input of the react js, we understand the working and its importance, we focus on some of the important examples of the controlled input in the react which revealed the working of the controlled input .
Recommended Articles
This is a guide to React Controlled Input. Here we discuss the Introduction of React Controlled Input and its Examples along with Code Implementation. You can also go through our other suggested articles to learn more –
