mirror of
https://github.com/tiennm99/gsd-framework.git
synced 2026-07-16 20:18:13 +00:00
feat(01-03): create PersonForm component
- Controlled form with useState for local state - Calls store.addPerson on form submit - Shows error message if addPerson fails - Clears input on successful add - Uses Preact hooks for form state management Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,32 @@
|
||||
import { useState } from 'preact/hooks';
|
||||
import { store } from '../../store/billStore.js';
|
||||
|
||||
export function PersonForm() {
|
||||
const [name, setName] = useState('');
|
||||
const [error, setError] = useState('');
|
||||
|
||||
const handleSubmit = (e) => {
|
||||
e.preventDefault();
|
||||
const result = store.addPerson(name);
|
||||
if (result.success) {
|
||||
setName('');
|
||||
setError('');
|
||||
} else {
|
||||
setError(result.error);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit} class="person-form">
|
||||
<input
|
||||
type="text"
|
||||
value={name}
|
||||
onInput={(e) => setName(e.target.value)}
|
||||
placeholder="Enter name"
|
||||
aria-label="Person name"
|
||||
/>
|
||||
<button type="submit">Add Person</button>
|
||||
{error && <p class="error">{error}</p>}
|
||||
</form>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user