Skip to content

GitLab

Commit 4273ad60 authored by Jiwon Yoon's avatar Jiwon Yoon
Browse files

react router 적용 완료-jw

parent 69284cba
Show whitespace changes
Inline Side-by-side
src/App.js
View file @ 4273ad60
import React from 'react'; import React from 'react';
// import logo from './logo.svg';
import './App.css'; import './App.css';
import Home from './Home'
import Quiz from './Quiz'
import End from './End'
import { BrowserRouter as Router, Link, Switch, Route } from 'react-router-dom';
function App() { function App() {
return ( return (
<div className="App"> <Router>
<h2>어떤 페이지가 나올까요? ^ ^</h2> <header>
궁금합니다^ ^ <Link to="/">
<button>Calculus</button>
</Link>
</header>
<hr/>
<div>
<Switch>
<Route exact path="/">
<Home/>
</Route>
<Route path="/quiz">
<Quiz/>
</Route>
<Route path="/end">
<End/>
</Route>
</Switch>
</div> </div>
); </Router>
)
} }
......
src/End.js 0 → 100644
View file @ 4273ad60
import React from 'react'
// import { Link } from 'react-router-dom';
function End() {
return (
<div className="Box">
<h2>수고하셨습니다!</h2>
</div>
)
}
export default End;
\ No newline at end of file
src/Home.js 0 → 100644
View file @ 4273ad60
import React from 'react'
import { Link } from 'react-router-dom';
function Home() {
return (
<div className="Box">
<div className="Name">
이름을 입력하세요
<input onChange={(event) => { console.log(event.target.value) }} />
</div>
<Link to="/quiz">
<button className="QuizStart">Quiz Start !</button>
</Link>
</div>
)
}
export default Home;
\ No newline at end of file
src/Quiz.js
View file @ 4273ad60
import React from 'react'; import React from 'react'
// import logo from './logo.svg'; import { Link } from 'react-router-dom';
import './Quiz.css';
const question = [ const question = [
{ Q: "6 X 4 ?", Choose: [6, 12, 18, 24], A: "" }, { Q: "6 X 4 ?", Choose: [6, 12, 18, 24], A: "" },
...@@ -12,68 +10,34 @@ const question = [ ...@@ -12,68 +10,34 @@ const question = [
class Quiz extends React.Component { class Quiz extends React.Component {
constructor(props) { constructor(props) {
super(props) super(props)
// this.setAnswer = this.setAnswer.bind(this)
this.setQuestion = this.setQuestion.bind(this) this.setQuestion = this.setQuestion.bind(this)
this.ShowQuiz = this.ShowQuiz.bind(this)
this.answerbox = this.answerbox.bind(this) this.answerbox = this.answerbox.bind(this)
this.state = { this.state = {
...question[0], ...question[0],
i: 0, i: 0,
page: 0, page: 0,
} }
// this.textInput = React.createRef()
}
ShowQuiz() {
this.setState({ page: 1 })
} }
setQuestion() { setQuestion() {
//값이 입력되지 않은채로 넘겨졌을 때 문제 해결 해야 함-sj- //값이 입력되지 않은채로 넘겨졌을 때 문제 해결 해야 함-sj-
this.setState({ ...question[this.state.i + 1], i: this.state.i + 1 }) this.setState({ ...question[this.state.i + 1], i: this.state.i + 1, page: this.state.page + 1 })
} }
//answerbox - answer박스의 값을 네임리스트로 받아와서 값을 localstorage에 저장 //answerbox - answer박스의 값을 네임리스트로 받아와서 값을 localstorage에 저장
answerbox() { answerbox() {
let answers = document.getElementsByName('answer'); let answers = document.getElementsByName('answer');
let count = answers.length let count = answers.length
// var checked_index = -1; // let checked_index = -1;
var checked_value = ''; let checked_value = '';
for (let i = 0; i < count; i++) {
for (var i = 0; i < count; i++) {
if (answers[i].checked) { if (answers[i].checked) {
// checked_index = i; // checked_index = i;
checked_value = answers[i].value; checked_value = answers[i].value;
localStorage.setItem('answer-'+i, checked_value) localStorage.setItem('answer-' + i, checked_value)
} }
} }
// alert('선택된 항목 인덱스: ' + checked_index + '\n선택된 항목 값: ' + checked_value);
// if (document.getElementsByName("answer")[i].checked === true) {
// alert(document.getElementsByName("answer")[i].value);
// }
} }
// setAnswer(e) {
// question[this.state.i]["A"] = e.target.value
// this.setState({ v: e.target.value })
// console.log(this.state)
// console.log(question)
// }
render() { render() {
if (this.state.page === 1) {
this.answerbox()
if (this.state.i === question.length) {
return (
<div>
<h2>수고하셨습니다!</h2>
</div>
)
}
else {
return ( return (
<div className="Quiz"> <div className="Quiz">
<h2>Q:{this.state.Q}</h2> <h2>Q:{this.state.Q}</h2>
...@@ -81,36 +45,18 @@ class Quiz extends React.Component { ...@@ -81,36 +45,18 @@ class Quiz extends React.Component {
<div> <div>
<input type="radio" name='answer' id={a} value={a} /*ref={this.textInput}*/ /> <input type="radio" name='answer' id={a} value={a} /*ref={this.textInput}*/ />
<label for={a}>{a}</label> <label for={a}>{a}</label>
</div>)
</div>)}
<div className="App">
정답을 입력하세요
</div>
{/* <div>
<input type="text" value={this.state.v} name="A" onChange={this.setAnswer} />
</div> */}
<button type="button" onClick={setTimeout(this.setQuestion, 2000)}>다음</button>
</div>
)
} }
<div className="App">정답을 입력하세요</div>
{/* 마지막 질문일 경우 /end페이지로 이동, 그렇지 않을경우는 this.setQuestion발생 */}
{(this.state.page === question.length-1)
? <Link to="/end">제출</Link>
: <button type="button" onClick={this.setQuestion}>다음</button>
} }
else {
return (
<div className="Box">
<div className="Main">
<h1> Calculus</h1>
</div>
<div className="Name">
이름을 입력하세요
<input onChange={(event) => { console.log(event.target.value) }} />
</div> </div>
<button className="QuizStart" onClick={this.ShowQuiz}>Quiz Start !</button>
</div>
) )
} }
}
} }
export default Quiz; export default Quiz;
\ No newline at end of file
src/index.js
View file @ 4273ad60
import React from 'react'; import React from 'react';
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom';
import './index.css'; import './index.css';
// import App from './App'; import App from './App';
import Quiz from './Quiz'; // import Quiz from './Quiz';
import * as serviceWorker from './serviceWorker'; import * as serviceWorker from './serviceWorker';
ReactDOM.render( ReactDOM.render(
<React.StrictMode> <React.StrictMode>
<Quiz /> <App />
</React.StrictMode>, </React.StrictMode>,
document.getElementById('root') document.getElementById('root')
); );
......
src/preQuiz.js 0 → 100644
View file @ 4273ad60
import React from 'react';
// import logo from './logo.svg';
import './Quiz.css';
const question = [
{ Q: "6 X 4 ?", Choose: [6, 12, 18, 24], A: "" },
{ Q: "3 + 3 ?", Choose: [2, 4, 6, 8], A: "" },
{ Q: "3 - 1 ?", Choose: [1, 2, 3, 4], A: "" }
]
class Quiz extends React.Component {
constructor(props) {
super(props)
// this.setAnswer = this.setAnswer.bind(this)
this.setQuestion = this.setQuestion.bind(this)
this.ShowQuiz = this.ShowQuiz.bind(this)
this.answerbox = this.answerbox.bind(this)
this.state = {
...question[0],
i: 0,
page: 0,
}
// this.textInput = React.createRef()
}
ShowQuiz() {
this.setState({ page: 1 })
}
setQuestion() {
//값이 입력되지 않은채로 넘겨졌을 때 문제 해결 해야 함-sj-
this.setState({ ...question[this.state.i + 1], i: this.state.i + 1 })
}
//answerbox - answer박스의 값을 네임리스트로 받아와서 값을 localstorage에 저장
answerbox() {
let answers = document.getElementsByName('answer');
let count = answers.length
// var checked_index = -1;
var checked_value = '';
for (var i = 0; i < count; i++) {
if (answers[i].checked) {
// checked_index = i;
checked_value = answers[i].value;
localStorage.setItem('answer-'+i, checked_value)
}
}
// alert('선택된 항목 인덱스: ' + checked_index + '\n선택된 항목 값: ' + checked_value);
// if (document.getElementsByName("answer")[i].checked === true) {
// alert(document.getElementsByName("answer")[i].value);
// }
}
// setAnswer(e) {
// question[this.state.i]["A"] = e.target.value
// this.setState({ v: e.target.value })
// console.log(this.state)
// console.log(question)
// }
render() {
if (this.state.page === 1) {
this.answerbox()
if (this.state.i === question.length) {
return (
<div>
<h2>수고하셨습니다!</h2>
</div>
)
}
else {
return (
<div className="Quiz">
<h2>Q:{this.state.Q}</h2>
{this.state.Choose.map((a) =>
<div>
<input type="radio" name='answer' id={a} value={a} /*ref={this.textInput}*/ />
<label for={a}>{a}</label>
</div>)}
<div className="App">
정답을 입력하세요
</div>
{/* <div>
<input type="text" value={this.state.v} name="A" onChange={this.setAnswer} />
</div> */}
<button type="button" onClick={setTimeout(this.setQuestion, 2000)}>다음</button>
</div>
)
}
}
else {
return (
<div className="Box">
<div className="Main">
<h1> Calculus</h1>
</div>
<div className="Name">
이름을 입력하세요
<input onChange={(event) => { console.log(event.target.value) }} />
</div>
<button className="QuizStart" onClick={this.ShowQuiz}>Quiz Start !</button>
</div>
)
}
}
}
export default Quiz;
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment