QDropdown.tsx 1.98 KB
Newer Older
Jiwon Yoon's avatar
Jiwon Yoon committed
1
import React, { useState } from "react";
2
import { IQuestionFormProps } from "../types";
3

4
5
6
7
8
export const QDropdown = ({
  element,
  handleQuestion,
  isEditing,
}: IQuestionFormProps) => {
Jiwon Yoon's avatar
Jiwon Yoon committed
9
10
11
12
13
14
15
16
17
  const [choices, setChoices] = useState([...element.content.choices]);

  function handleContent(event: React.ChangeEvent<HTMLInputElement>) {
    const { id, value } = event.target;
    choices[+id].text = value;
    element.content.choices = choices;
    handleQuestion(element._id);
    console.log(choices);
  }
Jiwon Yoon's avatar
Jiwon Yoon committed
18
19
20
21
22
23
24
25
26
27
28
  function deleteValue() {
    //제일 마지막 index 제거
    choices.splice(-1, 1);
    element.content.choices = choices;
    handleQuestion(element._id);
  }
  function addValue() {
    choices.push({ text: "", value: choices.length });
    element.content.choices = choices;
    handleQuestion(element._id);
  }
29
  return (
Jiwon Yoon's avatar
Jiwon Yoon committed
30
    <>
jang dong hyeok's avatar
jang dong hyeok committed
31
      <div id="content" className="mt-4 p-5">
Jiwon Yoon's avatar
Jiwon Yoon committed
32
33
        <select className="mr-3">
          {choices.map((choice: any, index: number) => (
jang dong hyeok's avatar
jang dong hyeok committed
34
            <option key={choice.value}>{choice.text}</option>
Jiwon Yoon's avatar
Jiwon Yoon committed
35
36
          ))}
        </select>
Jiwon Yoon's avatar
Jiwon Yoon committed
37
        {choices.map((choice: any, index: number) => (
jang dong hyeok's avatar
jang dong hyeok committed
38
          <div key={choice.value} className="my-5">
Jiwon Yoon's avatar
Jiwon Yoon committed
39
40
41
42
43
44
45
            <input
              id={`${index}`}
              type="text"
              className="mx-2 border-b-2"
              placeholder="선택지"
              value={choice.text}
              onChange={handleContent}
Yoon, Daeki's avatar
Yoon, Daeki committed
46
              disabled={!isEditing}
Jiwon Yoon's avatar
Jiwon Yoon committed
47
48
            ></input>
          </div>
Jiwon Yoon's avatar
Jiwon Yoon committed
49
        ))}
Jiwon Yoon's avatar
Jiwon Yoon committed
50
51
52
53
54
55
56
      </div>
      <div>
        <button
          type="button"
          name="rateValues"
          className="border border-red-500 rounded mx-2 px-2"
          onClick={deleteValue}
Yoon, Daeki's avatar
Yoon, Daeki committed
57
          disabled={!isEditing}
Jiwon Yoon's avatar
Jiwon Yoon committed
58
59
60
61
62
63
64
65
        >
          삭제
        </button>
        <button
          type="button"
          name="rateValues"
          className="border border-blue-500 rounded mx-2 px-2"
          onClick={addValue}
Yoon, Daeki's avatar
Yoon, Daeki committed
66
          disabled={!isEditing}
Jiwon Yoon's avatar
Jiwon Yoon committed
67
68
69
70
71
        >
          추가
        </button>
      </div>
    </>
72
73
  );
};