In TypeScript, handling checkbox events in React requires defining the proper event types for event handlers. Here’s how you can do it:
Types for Checkbox Event and Handler in React
1. Checkbox Change Event (React.ChangeEvent<HTMLInputElement>)
When handling the onChange event of a checkbox, use React.ChangeEvent<HTMLInputElement>.
Example:
import { ChangeEvent, useState } from "react";
const CheckboxComponent = () => {
const [checked, setChecked] = useState(false);
// Define the handler type correctly
const handleCheckboxChange = (event: ChangeEvent<HTMLInputElement>) => {
setChecked(event.target.checked); // Access checked property
};
return (
<label>
<input type="checkbox" checked={checked} onChange={handleCheckboxChange} />
Check me!
</label>
);
};
export default CheckboxComponent;
2. Using React.ChangeEventHandler<HTMLInputElement> (Alternative)
Instead of explicitly defining the event type, you can use React.ChangeEventHandler<HTMLInputElement> as the function type.
const handleCheckboxChange: React.ChangeEventHandler<HTMLInputElement> = (event) => {
console.log(event.target.checked);
};
3. Using React.FormEvent<HTMLInputElement> (Less Recommended)
You can use React.FormEvent<HTMLInputElement>, but it lacks the checked property directly.
const handleCheckboxChange = (event: React.FormEvent<HTMLInputElement>) => {
const target = event.target as HTMLInputElement;
console.log(target.checked); // Needs type assertion
};
