a small incremental UI library for the web
javascript
web
ui
Move input to component
+26
-18
+26
-18
demos/todo/todo.tsx
+26
-18
demos/todo/todo.tsx
···
14
14
const [newItemText, setNewItemText] = useState('');
15
15
16
16
useStyle(`
17
-
.container > .foo, .bar, [foo="bar"] {
18
-
background-color: red;
19
-
border: 1px solid green;
20
-
}
21
17
.container {
22
-
background-color: orange;
18
+
display: flex;
19
+
flex-direction: column;
23
20
}
24
21
`);
25
22
26
23
return (
27
24
<div class="container">
28
-
<div>
29
-
<input
30
-
onInput={ev => setNewItemText(ev.target.value)}
31
-
onKeyDown={ev => {
32
-
if (ev.key === 'Enter') {
33
-
setItems(items => [...items, newItemText]);
34
-
//setNewItemText('');
35
-
}
36
-
}}
37
-
value={newItemText}
38
-
placeholder="Item name"
39
-
/>
40
-
</div>
25
+
<ItemInput addItem={text => setItems(items => [...items, text])} />
41
26
<div id="items">{items.map(text => <Item text={text} />)}</div>
27
+
</div>
28
+
);
29
+
}
30
+
31
+
function ItemInput({addItem}) {
32
+
const [text, setText] = useState('');
33
+
34
+
function submit() {
35
+
addItem(text);
36
+
//setText('');
37
+
}
38
+
39
+
return (
40
+
<div>
41
+
<input
42
+
onInput={ev => setText(ev.target.value)}
43
+
onKeyDown={ev => {
44
+
if (ev.key === 'Enter') submit();
45
+
}}
46
+
value={text}
47
+
placeholder="Item name"
48
+
/>
49
+
<button onClick={() => submit()}>Add</button>
42
50
</div>
43
51
);
44
52
}