a small incremental UI library for the web
javascript
web
ui
Set value for value attribute and rework demo
+39
-21
+30
-19
demos/todo/todo.tsx
+30
-19
demos/todo/todo.tsx
···
10
10
}
11
11
12
12
function List(props) {
13
-
const [count, setCount] = useState(3);
14
-
15
-
const items = [];
16
-
for (i = 0; i < count; i++) {
17
-
items[i] = <Item text={`item ${i}`} />
18
-
}
13
+
const [items, setItems] = useState(['item 1', 'item 2', 'item 3']);
14
+
const [newItemText, setNewItemText] = useState('');
19
15
20
16
return (
21
-
<div class={`foo-${count}`}>
22
-
<button onClick={ev => setCount(c => c + 1)}>Add</button>
23
-
<button onClick={ev => setCount(c => c - 1)}>Remove</button>
24
-
<div id="items">{items}</div>
17
+
<div>
18
+
<div>
19
+
<input
20
+
onInput={ev => setNewItemText(ev.target.value)}
21
+
onKeyDown={ev => {
22
+
if (ev.key === 'Enter') {
23
+
setItems(items => [...items, newItemText]);
24
+
//setNewItemText('');
25
+
}
26
+
}}
27
+
value={newItemText}
28
+
placeholder="Item name"
29
+
/>
30
+
</div>
31
+
<div id="items">{items.map(text => <Item text={text} />)}</div>
25
32
</div>
26
33
);
27
34
}
28
35
29
36
function Item(props) {
30
-
const id = useFiber().id;
31
-
const [count, setCount] = useState(0);
32
-
33
-
useEffect(() => {
34
-
console.log(`in (id=${id}, count=${count})`);
35
-
return () => console.log(`out (id=${id}, count=${count})`);
36
-
}, [count]);
37
+
const [checked, setChecked] = useState(false);
37
38
38
39
return (
39
40
<div>
40
-
<span>{props.text} ({count})</span>
41
-
<button onClick={() => setCount(c => c + 1)}>+</button>
41
+
<input
42
+
type="checkbox"
43
+
checked={checked}
44
+
onInput={ev => {
45
+
setChecked(c => !c);
46
+
}}
47
+
/>
48
+
{
49
+
checked
50
+
? <s>{props.text}</s>
51
+
: <span>{props.text}</span>
52
+
}
42
53
</div>
43
54
);
44
55
}
+9
-2
js/commit.ts
+9
-2
js/commit.ts
···
188
188
}
189
189
else {
190
190
if (newVal !== oldVal) {
191
-
if (newVal === false || newVal === null || newVal === undefined) domNode.removeAttribute(newVal);
192
-
else domNode.setAttribute(key, newVal);
191
+
if (fiber.type === 'input' && key === 'value') {
192
+
if (newVal === false || newVal === null || newVal === undefined) domNode.value = null;
193
+
else domNode.value = newVal;
194
+
}
195
+
else{
196
+
if (newVal === false || newVal === null || newVal === undefined) domNode.removeAttribute(newVal);
197
+
else if (newVal === true) domNode.setAttribute(key, '');
198
+
else domNode.setAttribute(key, newVal);
199
+
}
193
200
}
194
201
}
195
202
}