I am going to explain you example of how to use textbox in react js. you can see how to use input in react component. This tutorial will give you simple example of react text field example. In this article, we will implement a react text input example.
If you are new in react then you want to see how to use text box in react app. but it's very easy to use text input 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 "name" input 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 = {
name: 'Hardik'
};
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 - HDTuto.com</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:
{name: "Hardik ss"}
I hope it can help you...
Do you like below Tutorials ?
- Laravel 7.x and 6.x Ajax Multiple Image Upload with Preview Example
- Laravel select with count(*) using db raw example
- PHP Laravel select with join subquery example
- PHP Laravel Ajax Form Submit Example
- How to create events for created/updated/deleted model task in Laravel 5?
- Angular JS Form Validation Example Code
- AngularJS - Confirm Password Validation Example
- Laravel Ajax Request using X-editable bootstrap Plugin Example