<!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);
파이팅