- What are controlled components?
- Code Example – Controlled Component
What are Controlled Component?
As per the ReactJS Form page, An <input> with “value” set is a controlled component. In a controlled <input>, the value of the rendered element will always reflect the value prop.
In the example below, the textfield consists of “value” attribute which is assigned to “this.state.value”. Following code represents the controlled component:
<input type="text" value={this.state.value} onChange={this.handleChange}/>
Code Example – Controlled Component
The code below represents following:
- The controlled UI component, namely, <input> field with value set.
- “onChange” event handler with a callback method “handleChange” which is invoked as the text in input field changes
- “setState” function which is invoked from handleChange method, thereby setting the value of “value” field to changed value
- “getInitialState” function setting the initial value of “value”
Changing text inside the text field will change the text ahead of “Hello”. Following screenshot represents the UI.
Following is the code sample:
<!DOCTYPE html>
<html>
<head>
<title>Hello ReactJS!</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>
<link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body class="container">
<div id="content"></div>
<script type="text/jsx">
var HelloUI = React.createClass({
getInitialState: function(){
return {value: 'Calvin'};
},
handleChange: function(event) {
this.setState({value: event.target.value});
},
render: function(){
return(
<div>
<h1>Hello, {this.state.value}</h1>
<hr/>
<input type="text" value={this.state.value} onChange={this.handleChange}/>
</div>
);
}
});
React.render(<HelloUI />, document.getElementById("content"))
</script>
</body>
</html>
- Model Parallelism vs Data Parallelism: Examples - April 11, 2024
- Model Complexity & Overfitting in Machine Learning: How to Reduce - April 10, 2024
- 6 Game-Changing Features of ChatGPT’s Latest Upgrade - April 9, 2024
Leave a Reply