-
질문 & 답변
카테고리
-
세부 분야
프론트엔드
-
해결 여부
미해결
리액트 새로고침 (구구단)
20.09.03 19:29 작성 조회수 184
0
선생님의 구구단 코드를 리액트 컴포넌트에 넣어보고 있습니다!
자꾸 구구단을 submit하면 새로고침돼서 state 값이 사라집니다!
새로 고침이 안되게 바꿀 수 있는 방법이 있을까요ㅜㅜ?
import React, { Fragment, useState } from 'react';
import { Link } from 'react-router-dom';
const Multiplication = () => {
const [gugudanState, setGugudanState] = useState({
first: Math.ceil(Math.random() * 9),
second: Math.ceil(Math.random() * 9),
value: '',
result: ''
});
const onChange = (e) => {
setGugudanState({
...gugudanState,
value: e.target.value
})
}
const onSubmit = (e) => {
//e.preventdefault();
if (gugudanState.first * gugudanState.second === parseInt(gugudanState.value)) {
setGugudanState({
first: Math.ceil(Math.random() * 9),
second: Math.ceil(Math.random() * 9),
value: '',
result: "정답입니다!"
})
} else {
setGugudanState({
...gugudanState,
value: "",
result: "땡"
})
}
}
return (
<Fragment>
<h2>이곳은 구구단 게임장입니다.</h2>
<div>{gugudanState.first} 곱하기 {gugudanState.second}는?</div>
<form onSubmit={(e) => onSubmit(e)}>
<input type="number" value={gugudanState.value} onChange={(e) => onChange(e)} />
<button>입력!</button>
</form>
<div>{gugudanState.result}</div>
<Link to="/Game" className="btn btn-light">
이전으로
</Link>
</Fragment >
);
};
export default Multiplication;
답변을 작성해보세요.
0
답변 1