This repository has been archived by the owner on Nov 18, 2023. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
ControlledComponents.js
114 lines (104 loc) · 2.8 KB
/
ControlledComponents.js
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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
import React, { useState } from "react";
const Warnings = () => {
const [name, setName] = useState();
const [animal, setAnimal] = useState("tiger");
return (
<div>
<div>
<label>
Read only (missing onChange): <input value="yo" readOnly />
</label>
</div>
<div>
<button onClick={() => setName("bob")}>Set name to bob</button>
<label>
Changing from uncontrolled to controlled:{" "}
<input value={name} onChange={(e) => setName(e.target.value)} />
</label>
</div>
<div>
<button onClick={() => setAnimal()}>Unset animal</button>
<label>
Changing from controlled to uncontrolled:{" "}
<input value={animal} onChange={(e) => setAnimal(e.target.value)} />
</label>
</div>
</div>
);
};
const MyCapitalizedInput = () => {
const [capitalizedValue, setCapitalizedValue] = useState("");
return (
<input
value={capitalizedValue}
onChange={(e) => setCapitalizedValue(e.target.value.toUpperCase())}
/>
);
};
const MyTwoInputs = () => {
const [capitalizedValue, setCapitalizedValue] = useState("");
const [lowerCasedValue, setLowerCasedValue] = useState("");
const handleInputChange = (e) => {
setCapitalizedValue(e.target.value.toUpperCase());
setLowerCasedValue(e.target.value.toLowerCase());
};
return (
<>
<input value={capitalizedValue} onChange={handleInputChange} />
<input value={lowerCasedValue} onChange={handleInputChange} />
</>
);
};
const UncontrolledToggle = () => {
const [onState, setOnState] = useState(false);
const toggle = () => setOnState(!onState);
return (
<div>
<p>Uncontrolled Component</p>
<button type="button" onClick={toggle}>
{onState ? "on" : "off"}
</button>
</div>
);
};
const ControlPropsToggle = ({ on: onProp, onToggle }) => {
const toggle = () => onToggle(!onProp);
return (
<div>
<p>Control Props Component</p>
<button type="button" onClick={toggle}>
{onProp ? "on" : "off"}
</button>
</div>
);
};
const FlexibleControlPropsToggle = ({ on: onProp, onToggle }) => {
const isPropsControlled = () => onProp !== undefined;
const [onState, setOnState] = useState(false);
const toggle = () => {
if (isPropsControlled()) {
onToggle(!onProp);
} else {
setOnState(!onState);
}
};
const on = isPropsControlled() ? onProp : onState;
return (
<div>
<p>
{isPropsControlled() ? "Control Props" : "Uncontrolled"} Component
</p>
<button type="button" onClick={toggle}>
{on ? "on" : "off"}
</button>
</div>
);
};
export {
Warnings,
MyCapitalizedInput,
MyTwoInputs,
UncontrolledToggle,
ControlPropsToggle,
FlexibleControlPropsToggle,
};