blob: 63cd4273442a4dc0e6f292b0d10525879c245560 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
import type { Quiz } from "../quiz";
import React, { useState } from "react";
import { useDebounce } from "use-debounce";
type Props = {
quiz: Quiz;
};
const INITIAL_ANSWER = "your_answer";
function FuncMyAnswer({ quiz }: Props) {
const [answer, setAnswer] = useState<string>(INITIAL_ANSWER);
const [debouncedAnswer] = useDebounce(answer, 500);
const hasAnyAnswer = debouncedAnswer !== INITIAL_ANSWER;
const isCorrectAnswer = debouncedAnswer === quiz.func;
const handleAnswerChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setAnswer(e.target.value);
};
return (
<div>
この関数は？
<input type="text" value={answer} onChange={handleAnswerChange} />
<p>
{hasAnyAnswer && (isCorrectAnswer ? `正解！${quiz.message}` : "不正解")}
</p>
</div>
);
}
export default FuncMyAnswer;
|
