Hi Developers,
Today we going to learn how to use onChange event in textbox in React JS. onChange is the most commonly used event in the React JS mainly used for the validation purpose while entering the form details. Lets see how to use onChange in React JS.
Lets see how to get value using onChange function
It stores the input value in a state and initially it displays the value default value given during declaration of the state and the value get updated during the onChange of the input .
import React, { Component } from 'react';
import { render } from 'react-dom';
class App extends Component {
constructor() {
super();
this.state = {
name: 'ITSolutionsGuides'
};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({name: event.target.value});
}
handleSubmit(event) {
console.log(this.state);
event.preventDefault();
}
render() {
return (
<div>
<h1>React Textbox onChange Example ITSolutionsGuides</h1>
<form onSubmit={this.handleSubmit}>
<input
type="text"
value={this.state.name}
onChange={this.handleChange} />
<input type="submit" value="Submit" />
</form>
</div>
);
}
}
render(<App />, document.getElementById('root'));
-------------------------------------------
Output :
ITSolutionsGuidesWe hope it helps everyone. Thanks for supporting ITSolutionsGuides and keep supporting us also follow us in social media platforms.
Be the first to know about releases and tutorial news and solutions.
We care about your data in our privacy policy.
ITSolutionsGuides was started mainly to provide good and quality web solutions for all the developers. We provide tutorials to support all the developers and also we try to provide solutions to the errors we face while coding.
ITSolutionsGuides, provide users with an easy-to-use form to reach out for support or inquiries.
Copyright © 2023 - 2024 All rights reserved | ITSolutionsGuides