This tutorial is focused on how to use textarea in react js. let’s discuss about react textarea onchange get value. you can see how to create a textarea in react js. i explained simply about textarea in react js. follow bellow step for get textarea value in react js.
If you are new in react then you want to see how to use textarea in react app. but it's very easy to use textarea in react js app. you can use it as you use in html and you have to write change event on it. using that change event you have to store value into form state. so you can get that data on submit.
In this example, we will take simple "body" input textarea field and add onchange event with handleChange() then we will assign value on state variable array. Then on submit event we will take that values with state variable.
So, let's see bellow preview and code:
Example Code:
import React, { Component } from 'react';
import { render } from 'react-dom';
class App extends Component {
constructor() {
super();
this.state = {
body: 'This is body'
};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({body: event.target.value});
}
handleSubmit(event) {
console.log(this.state);
event.preventDefault();
}
render() {
return (
<div>
<h1>React Textarea onChange Example - HDTuto.com</h1>
<form onSubmit={this.handleSubmit}>
<strong>Body:</strong>
<textarea
value={this.state.body}
onChange={this.handleChange} />
<input type="submit" value="Submit" />
</form>
</div>
);
}
}
render(<App />, document.getElementById('root'));
Output:
{body: "This is body ghgh"}
I hope it can help you...
Do you like below Tutorials ?
- How to Open URL in New Tab using Jquery?
- Laravel 7.x and 6.x Routing Tutorial
- Ng Bootstrap Modal in Angular 8 Example
- Bootstrap 4 Datepicker in Angular 9/8 Example
- Disable Registration Route in Laravel
- Bootstrap Timepicker in Angular Example
- Count Number of Pages in PDF - PHP Script
- Digital Signature PHP Script Example