Categories
Uncategorized

Forms in React.JS

To create class in React, it take the same pattern of creating class,  functions, render () and display output through ReactDOM. 

1) Text box: Here are the steps to create a simple form with a textbox: 

A) First of all create a class, and put a constructor function in it. Constructor function contains this.state which contains initial value as empty. After that it includes two bind for handleChange() function and handleSubmit() function. It has been shown below: 

class NameForm extends React.Component {
constructor(props) {
super(props);
this.state = {value: ''};

this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}

B) Secondly handleChange() function has been created which sets the value of newly written text. handleChange() runs on every button pressed and displayed value updates as user press any button. And handleSubmit() function displays message that ‘A name was submitted: name’. this.state.value displays the value entered.

handleChange(event) {
this.setState({value: event.target.value});
}

handleSubmit(event) {
alert('A name was submitted: ' + this.state.value);
event.preventDefault();
}

C) Render() has the actual code for form which shows onSubmit of form handleSubmit() function should run. After that there is HTML form with input type of text (textbox) which has value of text entered and onChange of this value handleChange() function is called. Finally there is submit button, when this button is clicked, onSubmit event defined in <form> gets called.

render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Name:
<input type="text" value={this.state.value} onChange={this.handleChange} />
</label>
<input type="submit" value="Submit" />
</form>
);
}
}

D) ReactDOM renders the class output.

ReactDOM.render(
<NameForm />,
document.getElementById('root')
);

2) Textarea: Textarea has similar React code as textbox. In above code all we need to do is replace replace HTML part of textbox syntax to textarea syntax inside render(), which make it:

<textarea value={this.state.value} onChange={this.handleChange} />

3) Dropdown: Similarly, dropdown has similar code in React. All we need to do is replace one HTML line of textarea with following HTML code of dropdown:

<label>
Pick your favorite flavor:
<select value={this.state.value} onChange={this.handleChange}>
<option value="grapefruit">Grapefruit</option>
<option value="lime">Lime</option>
<option value="coconut">Coconut</option>
<option value="mango">Mango</option>
</select>
</label>

and in constructor set which value to display in dropdown with this code:

this.state = {value: 'coconut'};


Adding multiple form fields: To add multiple form components at once, it handled by adding ‘name’ to each component. Let us make a checkbox and number field. 

First a class has been made, in constructor, initial checkbox value is set to ‘true’ and initial number field value is set to ‘2’ through the names given to them:

class Reservation extends React.Component {
constructor(props) {
super(props);
this.state = {
isGoing: true,
numberOfGuests: 2
};

this.handleInputChange = this.handleInputChange.bind(this);
}

handleInputChange() event has been created. In it, if target.type is checkbox, then value is 'checkbox', else value is whatever written in number field. And this value is set in 'this.setState'. 

handleInputChange(event) {
const target = event.target;
const value = target.type === 'checkbox' ? target.checked : target.value;
const name = target.name;

this.setState({
[name]: value
});
}

After that an actual form has been created in render(). First a checkbox has been created with name ‘isGoing’, later a number field has been created with name ‘numberOfGuests’. 

render() {
return (
<form>
<label>
Is going:
<input
name="isGoing"
type="checkbox"
checked={this.state.isGoing}
onChange={this.handleInputChange} />
</label>
<br />
<label>
Number of guests:
<input
name="numberOfGuests"
type="number"
value={this.state.numberOfGuests}
onChange={this.handleInputChange} />
</label>
</form>
);
}
}

Finally the values has been rendered using ReactDOM:

ReactDOM.render(
<Reservation />,
document.getElementById('root')
);


If you want to set more validations in React, then another alternate is a https://formik.org/

Leave a Reply

Your email address will not be published. Required fields are marked *