-
Notifications
You must be signed in to change notification settings - Fork 0
/
input-state.html
61 lines (59 loc) · 2.2 KB
/
input-state.html
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
<!DOCTYPE html>
<html lang="en">
<body>
<div id="root"></div>
</body>
<script src="https://unpkg.com/react@18.2.0/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
function App() {
const [amount, setAmount] = React.useState(""); // state 1
const [inverted, setInverted] = React.useState(false); // state 2
// INPUT 변화 일어난 값으로 amount 데이터 업데이트_리랜더링
const onChange = (event) => {
setAmount(event.target.value);
};
const reset = () => setAmount("");
const onInvert = () => {
reset();
setInverted((current) => !current);
};
return (
<div>
<h1 className="hi">Super Converter </h1>
<div>
<label htmlFor="minutes">Minutes </label>
<input
//input value, state로 연결(어디서든-외부에서도- input의 value 수정 가능)
value={inverted ? amount * 60 : amount} //삼항연산자(ternary operator)
id="minutes"
placeholder="Minutes"
type="number"
//input에서 리스닝 하고 있는 데이터 업데이트
onChange={onChange}
//inverted true여야 true 반환
disabled={inverted === true} //-- 그냥 간결하게 inverted만 써도 ok
/>
</div>
<div>
<label htmlFor="hours">Hours </label>
<input
value={inverted ? amount : Math.round(amount / 60)}
id="hours"
placeholder="Hours"
type="number"
onChange={onChange}
//inverted false여야 true 반환
disabled={inverted === false} //-- 그냥 간결하게 !inverted만 써도 ok
/>
</div>
<button onClick={reset}>Reset</button>
<button onClick={onInvert}>Invert</button>
</div>
);
}
const root = document.getElementById("root");
ReactDOM.render(<App />, root);
</script>
</html>