Here, we can try to define ReactJS: how to use Forms, react Forms, controlled components in react, ReactJS controlled components and how can we use Forms in react.
Forms
HTML form elements work a bit differently from other DOM elements in React because form elements naturally keep some internal state like example, this form in plain HTML accepts a single name below
<form> <label> Name: <input type="text" name="name" /> </label> <input type="submit" value="Submit" /> </form>
Now, the standard way to achieve this is with a technique called “controlled components”.
You can purchase your hosting from Cloudsurph.com, Cloudsurph hosting is a reliable hosting option for business and personal projects. We offer insight and help on system configuration issues and code errors or bugs.
Controlled Components
For HTML, form elements such as <input>, <textarea>, and <select> typically maintain their own state and update it based on user input other hand ReactJS.
A mutable state is typically kept in the state property of components and that updated only with setState().
So, check the below example:
class NameForm extends React.Component {
constructor(props) {
super(props);
this.state = {value: ''};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({value: event.target.value});
}
handleSubmit(event) {
alert('A name was submitted: ' + this.state.value);
event.preventDefault();
}
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>
);
}
}
The textarea Tag
In the HTML, an <textarea> element identify its text by its children like the below code
<textarea> Hello there, this is some text in a text area </textarea>
In ReactJS, a <textarea> uses a value attribute instead and this way, a form using a <textarea> can be written very similarly to a form that uses a single-line input like the below example:
class EssayForm extends React.Component {
constructor(props) {
super(props);
this.state = {
value: 'Please write an essay about your favorite DOM element.'
};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({value: event.target.value});
}
handleSubmit(event) {
alert('An essay was submitted: ' + this.state.value);
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Essay:
<textarea value={this.state.value} onChange={this.handleChange} />
</label>
<input type="submit" value="Submit" />
</form>
);
}
}
The select Tag
In the HTML, <select> creates a drop-down list like for example below and this HTML creates a drop-down list of flavors:
You can check our article: AdonisJS: REST API simple CRUD Operation. IF you want then buy a good, reliable, secure web hosting service from here: click here
<select> <option value="grapefruit">Grapefruit</option> <option value="lime">Lime</option> <option selected value="coconut">Coconut</option> <option value="mango">Mango</option> </select>
This is more suitable in a controlled component because you can only need to update it in one place:
class FlavorForm extends React.Component {
constructor(props) {
super(props);
this.state = {value: 'coconut'};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({value: event.target.value});
}
handleSubmit(event) {
alert('Your favorite flavor is: ' + this.state.value);
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<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>
<input type="submit" value="Submit" />
</form>
);
}
}
The file input Tag
In the HTML, an <input type=”file”> lets the user choose one or more files from their own device storage to be uploaded to a server and manipulated by JavaScript through the File API like the below code
<input type="file" />
Handling Multiple Inputs
And let the handler function select what to do based on the value of event.target.name:
class Reservation extends React.Component {
constructor(props) {
super(props);
this.state = {
isGoing: true,
numberOfGuests: 2
};
this.handleInputChange = this.handleInputChange.bind(this);
}
handleInputChange(event) {
const target = event.target;
const value = target.type === 'checkbox' ? target.checked : target.value;
const name = target.name;
this.setState({
[name]: value
});
}
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>
);
}
}
Controlled Input Null Value
Now, specifying the value prop on a controlled component prevents the user from changing the input unless you desire so and if you’ve specified a value
But the input is still editable, you may have accidentally set the value to undefined or null:
ReactDOM.createRoot(mountNode).render(<input value="hi" />);
setTimeout(function() {
ReactDOM.createRoot(mountNode).render(<input value={null} />);
}, 1000);
If you enjoyed reading this article and have more questions please reach out to our support team via live chat or email and we would be glad to help you. we provide server hosting for all types of need and we can even get your server up and running with the service of your choice.