Notice
Recent Posts
Recent Comments
Link
«   2025/06   »
일 월 화 수 목 금 토
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
Tags more
Archives
Today
Total
관리 메뉴

기록

리액트3 select 선택 (Divide and Conquer) 본문

REACT

리액트3 select 선택 (Divide and Conquer)

9400 2023. 9. 11. 14:10 
<!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 KmToMiles() {
        return <h3>KM 2 M</h3>
    }
    function MinutesToHours() {
        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>
                <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>
        )
    }
    function App() {
        const [index, setIndex] = React.useState("xx");
        const onSelect = (event) => {
            setIndex(event.target.value);
        }
        console.log('render w/', index)
        return (
            <div>
                <h1>단위 변환</h1>
                <select value={index} onChange={onSelect}>
                    <option value="xx">select your units</option>
                    <option value="0">Minutes & Hours</option>
                    <option value="1">Km & Miles</option>
                </select>
                < hr />
                {index === "xx" ? "Please select your unit" : null}
                {index === "0" ? <MinutesToHours /> : null}
                {index === "1" ? <KmToMiles /> : null}
            </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
리액트2 단위변환  (0) 2023.09.11
리액트 1  (0) 2023.09.08
'REACT' Related Articles more
Comments