반응형
flip 이라는 Boolean 타입의 값을 이용해서
분 > 시간 단위를 더 용이하게 변경할 수 있었다.
지난 시간에 살펴본 current 사용
// const onFlip = () => setFlipped(!flipped);
const onFlip = () => setFlipped((current) => !current);
일반적으로 input 요소에 작성하는 disable은 아래와 같이도 작성 가능하다.
disabled={flipped === true}
코드
<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
</body>
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
const root = document.getElementById("root");
function App() {
// min > hour
const [amount, setAmount] = React.useState(0);
const [flipped, setFlipped] = React.useState(false);
const onChange = (event) => {
// console.log(event.target.value);
setAmount(event.target.value);
}
// const onFlip = () => setFlipped(!flipped);
const onFlip = () => {
reset();
setFlipped((current) => !current);
}
const reset = () => setAmount(0);
return (
<div>
<h1>Super Converter</h1>
<label htmlFor="minute">minute</label>
<input
id="amount"
value={flipped ? amount * 60 : amount}
placeholder="amount"
type="number"
onChange={onChange}
disabled={flipped}
/>
<br />
<label htmlFor="hours">Hours</label>
<input
disabled={!flipped}
id="hours"
placeholder="Hours"
value={flipped ? amount : Math.round(amount / 60)}
type="number"
onChange={onChange}
/> <br />
<button onClick={reset}>Reset</button>
<button onClick={onFlip}> Flip </button>
</div>
);
}
ReactDOM.render(<App />, root);
</script>
</html>반응형
'온라인 강의 > ReactJS로 영화 웹 서비스 만들기 [Nomad]' 카테고리의 다른 글
| #4.0 Props (0) | 2023.05.22 |
|---|---|
| #3.8 Recap #3.9 Final Practice and Recap (0) | 2023.05.22 |
| #3.6 State Practice part One (0) | 2023.05.22 |
| #3.5 Inputs and State (0) | 2023.05.22 |
| #3.4 State Functions (0) | 2023.05.20 |