React js

Working with forms

Working with Forms in React

Controlled Components

In React, form inputs are usually controlled components, meaning their values are controlled by React state.

  • The input’s value is set from state.

  • When the user types, an onChange event updates that state.

Basic Example: Single Input

jsx
import React, { useState } from 'react';

function SimpleForm() {
const [name, setName] = useState('');

const handleChange = (event) => {
setName(event.target.value);
};

const handleSubmit = (event) => {
event.preventDefault(); // Prevent page reload
alert('Submitted name: ' + name);
};

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

Handling Multiple Inputs

Manage multiple form fields using one state object and dynamic keys:

jsx
function MultiInputForm() {
const [formData, setFormData] = React.useState({
username: '',
email: '',
});

const handleChange = (event) => {
const { name, value } = event.target;
setFormData(prev => ({
...prev,
[name]: value,
}));
};

const handleSubmit = (event) => {
event.preventDefault();
alert(`Username: ${formData.username}, Email: ${formData.email}`);
};

return (
<form onSubmit={handleSubmit}>
<input
name="username"
value={formData.username}
onChange={handleChange}
placeholder="Username"
/>
<input
name="email"
type="email"
value={formData.email}
onChange={handleChange}
placeholder="Email"
/>
<button type="submit">Submit</button>
</form>
);
}

Checkbox Example

jsx
function CheckboxForm() {
const [checked, setChecked] = React.useState(false);

const handleCheckboxChange = (event) => {
setChecked(event.target.checked);
};

return (
<label>
<input
type="checkbox"
checked={checked}
onChange={handleCheckboxChange}
/>
Accept Terms and Conditions
</label>
);
}

Summary

  • Use controlled inputs for React to manage form data.

  • Handle user input with onChange to update state.

  • Use onSubmit on the form to handle submission and prevent page reload.

  • Manage multiple inputs with one state object and dynamic updates.

  • Use specific input attributes (checked for checkboxes, value for text inputs).

Related Posts

Leave a Reply

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