ReactJS 3.8

ahrvhska10·2022년 3월 23일
0
<html lang="ko">

<body>
    <div id="root"></div>
</body>
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
    const root = document.querySelector("#root");
    function App() {
        const [amount, setAmount] = React.useState("");
        const [inverted, setInverted] = React.useState(false);
        
        const onChange = (event) => {
            setAmount(event.target.value);
        };
        const reset = () => setAmount(0)
        const onInvert = () => {
            setInverted((current) => !current);};
        return (
            <div>
                <h1>converter</h1>
                <div>
                <label htmlfor="minutes">Minutes</label>
                    <input 
                    value={inverted ? amount * 60 : amount} 
                    id="minutes" 
                    placeholder="Minutes" 
                    type="number"
                    onChange={onChange}
                    disabled={inverted}
                />
                </div>
                <div>
                <label htmlfor="hours">Hours</label>
                
                <input
                    value={inverted ? amount : Math.round(amount / 60)}
                    id="hours"
                    placeholder="Hours"
                    type="number"
                    disabled={!inverted}
                />
                </div>
                <button onClick={reset}>Reset</button>
                <button onClick={onInvert}>{inverted ? "Turn back" : "Invert"}</button>
            </div>
        );
    }
    ReactDOM.render(<App />, root);
</script>
</html>

input의 disabled 속성은 인풋을 비활성화 시킨다.
input 값은controlled component로 만들자.
setState()에 함수를 할당하는 것을 잘 활용하면 이전 state를 손쉽게 바꿀 수 있다.

profile
안녕하세요.

0개의 댓글