RatingForm.tsx 2.74 KB
Newer Older
Jiwon Yoon's avatar
Jiwon Yoon committed
1
import React, { useState } from "react";
2
3
4
5
import { RatingType } from "../types";

type Props = {
  element: RatingType;
Jiwon Yoon's avatar
Jiwon Yoon committed
6
  handleQuestion: (id: string) => void;
Jiwon Yoon's avatar
Jiwon Yoon committed
7
  save: boolean;
8
9
};

Jiwon Yoon's avatar
Jiwon Yoon committed
10
export const RatingForm = ({ element, handleQuestion, save }: Props) => {
Jiwon Yoon's avatar
Jiwon Yoon committed
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
  const [choices, setChoices] = useState([...element.content.choices]);

  function handleContent(event: React.ChangeEvent<HTMLInputElement>) {
    const { id, value, name } = event.target;
    if (name === "text") {
      choices[+id].text = value;
      element.content.choices = choices;
    } else if (name === "minRateDescription") {
      element.content = { ...element.content, minRateDescription: value };
    } else if (name === "maxRateDescription") {
      element.content = { ...element.content, maxRateDescription: value };
    }
    handleQuestion(element._id);
    console.log(choices);
  }

  function deleteValue() {
    //제일 마지막 index 제거
    choices.splice(-1, 1);
    element.content.choices = choices;
    handleQuestion(element._id);
  }
  function addValue() {
34
    choices.push({ text: "", value: choices.length });
Jiwon Yoon's avatar
Jiwon Yoon committed
35
36
37
    element.content.choices = choices;
    handleQuestion(element._id);
  }
38
39

  return (
Jiwon Yoon's avatar
Jiwon Yoon committed
40
    <>
Jiwon Yoon's avatar
Jiwon Yoon committed
41
      <div className="flex place-content-center items-center w-full p-5 overflow-x-auto">
42
43
44
        <input
          name="minRateDescription"
          className="border-b-2 text-center"
Jiwon Yoon's avatar
Jiwon Yoon committed
45
          size={5}
Jiwon Yoon's avatar
Jiwon Yoon committed
46
47
          placeholder="비동의"
          value={element.content.minRateDescription}
Jiwon Yoon's avatar
Jiwon Yoon committed
48
          onChange={handleContent}
Jiwon Yoon's avatar
Jiwon Yoon committed
49
          disabled={save}
50
        ></input>
Jiwon Yoon's avatar
Jiwon Yoon committed
51
        {choices.map((choice: any, index: number) => (
52
          <input
jang dong hyeok's avatar
jang dong hyeok committed
53
            key={choice.value}
54
            name="text"
Jiwon Yoon's avatar
Jiwon Yoon committed
55
            id={`${index}`}
56
57
58
            type="text"
            className="border border-black rounded-full py-1 m-2 text-center"
            size={1}
Jiwon Yoon's avatar
Jiwon Yoon committed
59
60
            placeholder="0"
            value={choice.text}
Jiwon Yoon's avatar
Jiwon Yoon committed
61
            onChange={handleContent}
Jiwon Yoon's avatar
Jiwon Yoon committed
62
            disabled={save}
63
64
65
66
67
          ></input>
        ))}
        <input
          name="maxRateDescription"
          className="border-b-2 text-center"
Jiwon Yoon's avatar
Jiwon Yoon committed
68
          size={5}
Jiwon Yoon's avatar
Jiwon Yoon committed
69
70
          placeholder="동의"
          value={element.content.maxRateDescription}
Jiwon Yoon's avatar
Jiwon Yoon committed
71
          onChange={handleContent}
Jiwon Yoon's avatar
Jiwon Yoon committed
72
          disabled={save}
73
74
75
76
        ></input>
      </div>
      <div>
        <button
Jiwon Yoon's avatar
Jiwon Yoon committed
77
          type="button"
78
79
          name="rateValues"
          className="border border-red-500 rounded mx-2 px-2"
Jiwon Yoon's avatar
Jiwon Yoon committed
80
          onClick={deleteValue}
Jiwon Yoon's avatar
Jiwon Yoon committed
81
          disabled={save}
82
83
84
        >
          삭제
        </button>
Jiwon Yoon's avatar
Jiwon Yoon committed
85
86
87
88
89
        <button
          type="button"
          name="rateValues"
          className="border border-blue-500 rounded mx-2 px-2"
          onClick={addValue}
Jiwon Yoon's avatar
Jiwon Yoon committed
90
          disabled={save}
Jiwon Yoon's avatar
Jiwon Yoon committed
91
        >
92
93
94
          추가
        </button>
      </div>
Jiwon Yoon's avatar
Jiwon Yoon committed
95
    </>
96
97
  );
};