반응형
Jsp 기반의 html에서는 input element에 value 속성이 지정된 것과 관계없이 입력이 가능하지만 React에서는 value 속성을 value={value} 와 같이 성하면 값이 입력되지 않는다.
input element에 value 속성만 지정하면 value 속성으로만 값을 control 할 수 있는 권한이 있기 때문에, 즉 사용자가 값을 입력하는 권한이 없다. 그런 의미에서 input 내 값이 변경되지 않는 것이다.
따라서 onChange를 이용하여 input element 값이 수정 가능한 상태로 변경해줄 수 있다.
코드
<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
</body>
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
const root = document.getElementById("root");
function App() {
// min > hour
const [minutes, setMinutes] = React.useState(0);
const onChange = (event) => {
setMinutes(event.target.value);
}
const [hours, setHours] = React.useState(0);
const reset = () => {
setMinutes(0);
}
return (
<div>
<h1>Super Converter</h1>
<label htmlFor="minutes">Minutes</label>
<input
id="minutes"
value={minutes}
placeholder="Minutes"
type="number"
onChange={onChange}
/>
<br />
<label htmlFor="hours">Hours</label>
<input id="hours" placeholder="Hours" value={Math.round(minutes / 60)} type="number" /> <br />
<button onClick={reset}>Reset</button>
</div>
);
}
ReactDOM.render(<App />, root);
</script>
</html>
반응형
'온라인 강의 > ReactJS로 영화 웹 서비스 만들기 [Nomad]' 카테고리의 다른 글
| #3.8 Recap #3.9 Final Practice and Recap (0) | 2023.05.22 |
|---|---|
| #3.7 State Practice part Two (0) | 2023.05.22 |
| #3.5 Inputs and State (0) | 2023.05.22 |
| #3.4 State Functions (0) | 2023.05.20 |
| #3.3 Recap (0) | 2023.05.20 |