in HTML form tag is used to collect input data to send to the server. similarly in React form tag work.
form tag in React is used in Component through render() method like other HTML tag what we want to render.
form tag collect data in the form of get or post what we define in method to collect data to send to server.
Example to use form tag in react Component ?
class Fillname extends React.Component {
render() {
return (
<form>
<h1>Hi</h1>
<p>fill your name:</p>
<input
type="text"
/>
</form>
);
}
}
ReactDOM.render(<Fillname />, document.getElementById('root'));
when react will call Fillname component through render() method of component form tag will appear in DOM with input tag like whta we use in HTML form tag
Event handler of React form tag
Event handler of React form tag input we can handle simliar to HTML attribute
in HTML DOM handle the form data while in React Component will handle the data
in React all form data is store in inbuilt Component object state
Example:
class Myname extends React.Component {
constructor(props) {
super(props);
this.state = { myname: '' };
}
myChangeHandler = (event) => {
this.setState({username: event.target.value});
}
render() {
return (
<form>
<h1>Hello {this.state.myname}</h1>
<p>Enter name:</p>
<input
type='text'
onChange={this.myChangeHandler}
/>
</form>
);
}
}
ReactDOM.render(<Myname />, document.getElementById('root'));
How to use condition in React form tag ?
if you want conditional programming then let’s take an example
class Myname extends React.Component {
constructor(props) {
super(props);
this.state = { name: '' };
}
myChangeHandler = (event) => {
this.setState({name: event.target.value});
}
render() {
let flag= '';
if (this.state.name) {
header = <h1>Hello {this.state.name}</h1>;
} else {
flag= '';
}
return (
<form>
{flag}
<p>Enter your name:</p>
<input
type='text'
onChange={this.myChangeHandler}
/>
</form>
);
}
}
ReactDOM.render(<Myname />, document.getElementById('root'));
in the above example flag variable is defined on the behlf of conditional programming
if there is input the flag text will display in DOM otherwise not
Submit Event handler in React form tag ?
Example of Submit event Handler
class ReactForm extends React.Component {
constructor(props) {
super(props);
this.state = { name: '' };
}
mySubmitHandler = (event) => {
event.preventDefault();
alert("You are submitting " + this.state.name);
}
myChangeHandler = (event) => {
this.setState({name: event.target.value});
}
render() {
return (
<form onSubmit={this.mySubmitHandler}>
<h1>Hello {this.state.name}</h1>
<p>fill your name</p>
<input
type='text'
onChange={this.myChangeHandler}
/>
<input
type='submit'
/>
</form>
);
}
}
ReactDOM.render(<ReactForm />, document.getElementById('root'));
in the above Example preventDefault() Event cancel the event
How React handle multiple input Fields
Multiple input with name attribute is used to set the state property of React component in constructor through props.
in React square backet [ ] is used to update the property name of state property of React component if multiple input have.
class Reactform extends React.Component {
constructor(props) {
super(props);
this.state = {
username: '',
age: null,
};
}
myChangeHandler = (event) => {
let nam = event.target.name;
let val = event.target.value;
this.setState({[nam]: val});
}
render() {
return (
<form>
<h1>Output is {this.state.username} {this.state.age}</h1>
<p>Enter your name:</p>
<input
type='text'
name='username'
onChange={this.myChangeHandler}
/>
<p>Enter your age:</p>
<input
type='text'
name='age'
onChange={this.myChangeHandler}
/>
</form>
);
}
}
ReactDOM.render(<Reactform />, document.getElementById('root'));
in the above example Square backet [ ] is behave like array to update the state name.
first it will update username then age of state property name
How do React validate form input fields ?
React validate form input fields through Component . there will be no submittion until form get validated
Example
class Reactform extends React.Component {
constructor(props) {
super(props);
this.state = {
username: '',
age: null,
};
}
myChangeHandler = (event) => {
let nam = event.target.name;
let val = event.target.value;
if (nam === "age") {
if (!Number(val)) {
alert("age should be number");
}
}
this.setState({[nam]: val});
}
render() {
return (
<form>
<h1>Hello {this.state.username} {this.state.age}</h1>
<p>Enter your name:</p>
<input
type='text'
name='username'
onChange={this.myChangeHandler}
/>
<p>Enter your age:</p>
<input
type='text'
name='age'
onChange={this.myChangeHandler}
/>
</form>
);
}
}
ReactDOM.render(<Reactform />, document.getElementById('root'));
Example of form validate after Form submittion ?
class Reactform extends React.Component {
constructor(props) {
super(props);
this.state = {
username: '',
age: null,
};
}
mySubmitHandler = (event) => {
event.preventDefault();
let age = this.state.age;
if (!Number(age)) {
alert("age must be a number");
}
}
myChangeHandler = (event) => {
let nam = event.target.name;
let val = event.target.value;
this.setState({[nam]: val});
}
render() {
return (
<form onSubmit={this.mySubmitHandler}>
<h1>Hello {this.state.username} {this.state.age}</h1>
<p>Enter your name:</p>
<input
type='text'
name='username'
onChange={this.myChangeHandler}
/>
<p>Enter your age:</p>
<input
type='text'
name='age'
onChange={this.myChangeHandler}
/>
<br/>
<br/>
<input type='submit' />
</form>
);
}
}
ReactDOM.render(<Reactform />, document.getElementById('root'));
Example of React form validation without Alert
class Reactform extends React.Component {
constructor(props) {
super(props);
this.state = {
username: '',
age: null,
errormessage: ''
};
}
myChangeHandler = (event) => {
let nam = event.target.name;
let val = event.target.value;
let err = '';
if (nam === "age") {
if (val !="" && !Number(val)) {
err = <strong>age must be a number</strong>;
}
}
this.setState({errormessage: err});
this.setState({[nam]: val});
}
render() {
return (
<form>
<h1>Hello {this.state.username} {this.state.age}</h1>
<p>Enter your name:</p>
<input
type='text'
name='username'
onChange={this.myChangeHandler}
/>
<p>Enter your age:</p>
<input
type='text'
name='age'
onChange={this.myChangeHandler}
/>
{this.state.errormessage}
</form>
);
}
}
ReactDOM.render(<Reactform />, document.getElementById('root'));
Example of textarea in ReactForm
class Textarea extends React.Component {
constructor(props) {
super(props);
this.state = {
description: 'text area'
};
}
render() {
return (
<form>
<textarea value={this.state.description} />
</form>
);
}
}
ReactDOM.render(<Textarea />, document.getElementById('root'));
Example of selection tag in React form
class Selection extends React.Component {
constructor(props) {
super(props);
this.state = {
name: 'yashpal'
};
}
render() {
return (
<form>
<select value={this.state.name}>
<option value="christo">christo</option>
<option value="killian">killian</option>
<option value="start lord">start lord</option>
</select>
</form>
);
}
}
ReactDOM.render(<Selection />, document.getElementById('root'));