React 12

정준호·2022년 7월 4일
0

React

목록 보기
12/13
<!DOCTYPE html>
<html>
<body>
    <div id="root"></div>
</body>
<script src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
    function App() {
        const [minutes, setMinutes] = React.useState(0)
        const onChange = (event) => {
            setMinutes(event.target.value);
        };
        const reset = () => setMinutes(0);
        return(
            <div>
                <h1>Super Converter</h1>
                <div>
                <label htmlFor="minutes">Minutes</label>
                <input value={minutes} id="minutes" placeholder="Minutes" type="number"
                onChange={onChange}
                />
                </div>
                
                <div>
                <label htmlFor="hours">Hours</label>
                <input value={Math.round(minutes/60)} id="hours" placeholder="Hours" type="number" disabled/>
                </div>
                <button onClick={reset}>Reset</button>
            </div>
        );
    }
    const root = document.getElementById("root");
    ReactDOM.render(<App />,root);
</script>
</html>

Math.round - 반올림

<button onClick={reset}>Reset</button>

리셋버튼 - onClick이벤트가 발생했을때 reset함수를 실행하는데 reset함수의 내용은
state에 있는 setMinutes함수의 값을 0으로 실행한다.

const reset = () => setMinutes(0);
profile
파이팅

0개의 댓글