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>
Last updated: 28th April, 2024 As a data scientist, understanding the nuances of various cost…
Last updated: 28th April, 2024 In this post, you will learn the concepts related to…
Last updated: 26th April, 2024 In this blog post, we will discuss the logistic regression…
Last updated: 22nd April, 2024 As data scientists, we navigate a sea of metrics to…
Last updated: 22nd April, 2024 This post will teach you about the gradient descent algorithm…
Last updated: 19th April, 2024 Among the terminologies used in training machine learning models, the…