기록
리액트2 단위변환 본문
<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
</body>
<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/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(0);
const [flipped, setFlipped]= React.useState(false);
const onChange = (event) => {
setAmount(event.target.value);
}
const reset = () => setAmount(0);
const onFlip = () => {
reset();
setFlipped((current) => !current);
}
return (
<div>
<h1>단위 변환</h1>
<label htmlFor="minutes">Minutes</label>
<input
value = {flipped ? amount*60 : amount}
id="minutes"
type="number"
placeHolder="minutes"
onChange = {onChange}
disabled = {flipped}
/>
<h4>you want to convert {amount}</h4>
<label htmlFor="hours">hours</label>
<input
value = { flipped ? amount : Math.round(amount / 60)}
id="hours" type="number" placeHolder="hours"
onChange = {onChange}
disabled={!flipped} />
<button onClick={reset}>RESET</button>
<button onClick={onFlip}>{flipped ? "turn Back" : "Invert"}</button>
</div>
)
}
const root = document.getElementById("root");
ReactDOM.render(<App />,root)
</script>
</html>'REACT' 카테고리의 다른 글
| 리액트6 useEffect() / cleanUp function (0) | 2023.09.12 |
|---|---|
| 리액트5 create-react-app 설치 및 css적용 (0) | 2023.09.12 |
| 리액트4 props 컴포넌트 재사용 propTypes (0) | 2023.09.11 |
| 리액트3 select 선택 (Divide and Conquer) (0) | 2023.09.11 |
| 리액트 1 (0) | 2023.09.08 |
Comments