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}/>
The code below represents following:
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>
In this blog, you would get to know the essential mathematical topics you need to…
This blog represents a list of questions you can ask when thinking like a product…
AI agents are autonomous systems combining three core components: a reasoning engine (powered by LLM),…
Artificial Intelligence (AI) has evolved significantly, from its early days of symbolic reasoning to the…
Last updated: 25th Jan, 2025 Have you ever wondered how to seamlessly integrate the vast…
Hey there! As I venture into building agentic MEAN apps with LangChain.js, I wanted to…