/
index.tsx
51 lines (45 loc) · 1.29 KB
/
index.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
import { h, VNode } from 'preact';
import { useCallback, useState } from 'preact/hooks';
import { Item } from '../../types';
import { Button } from '../Button';
import { ErrorButton } from '../ErrorButton';
import { Input } from '../Input';
interface ItemFormProps {
/**
* Called when the form is submitted
*/
onSubmit: (item: Item) => void;
}
/**
* A form for editing an item.
*/
export function ItemForm({ onSubmit }: ItemFormProps): VNode {
const [item, setItem] = useState<Item>({ text: '', link: '' });
const handleChange = useCallback(
({ currentTarget }: h.JSX.TargetedEvent<HTMLInputElement>) => {
setItem({
...item,
[currentTarget.name]: currentTarget.value,
});
},
[item],
);
const handleSubmit = useCallback(
(event: h.JSX.TargetedEvent<HTMLFormElement>) => {
event.preventDefault();
onSubmit(item);
setItem({ text: '', link: '' });
},
[item, onSubmit],
);
return (
<form noValidate onSubmit={handleSubmit}>
<Input label="text" name="text" onChange={handleChange} value={item.text} />
<Input label="link" name="link" onChange={handleChange} type="url" value={item.link} />
<ErrorButton />
<Button className="is-primary" type="submit">
Add
</Button>
</form>
);
}