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 recent years, artificial intelligence (AI) has evolved to include more sophisticated and capable agents,…
Adaptive learning helps in tailoring learning experiences to fit the unique needs of each student.…
With the increasing demand for more powerful machine learning (ML) systems that can handle diverse…
Anxiety is a common mental health condition that affects millions of people around the world.…
In machine learning, confounder features or variables can significantly affect the accuracy and validity of…
Last updated: 26 Sept, 2024 Credit card fraud detection is a major concern for credit…