Skip to content
GitLab
Menu
Projects
Groups
Snippets
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
Menu
Open sidebar
students
survey
Commits
69a26550
Commit
69a26550
authored
Jul 20, 2022
by
Lee SeoYeon
Browse files
rating 선택한 버튼 색깔 다르게 하기
parent
71300da6
Changes
1
Hide whitespace changes
Inline
Side-by-side
frontend/src/commons/ARatingForm.tsx
View file @
69a26550
import
React
from
"
react
"
;
import
React
,
{
useState
}
from
"
react
"
;
import
{
RatingType
}
from
"
../types
"
;
type
Props
=
{
...
...
@@ -6,14 +6,31 @@ type Props = {
};
export
const
ARatingForm
=
({
element
}:
Props
)
=>
{
const
[
selectedchoice
,
setSelectedchoice
]
=
useState
(
""
);
function
buttonClick
(
event
:
React
.
MouseEvent
<
HTMLButtonElement
>
)
{
event
.
preventDefault
();
setSelectedchoice
(
event
.
currentTarget
.
name
);
}
return
(
<
div
className
=
"flex w-full gap-4 justify-around my-3"
>
<
div
className
=
"flex w-full justify-center space-x-12 my-3"
>
<
label
className
=
"mt-3"
>
{
element
.
content
.
minRateDescription
}
</
label
>
{
element
.
content
.
choices
.
map
((
choice
)
=>
(
<
div
>
<
input
className
=
"mr-2"
></
input
>
<
label
className
=
"text-lg"
>
{
choice
.
text
}
</
label
>
<
div
className
=
"flex gap-4"
>
<
button
type
=
"button"
className
=
"border border-themeColor rounded-full w-12 h-12 text-center hover:bg-slate-300"
name
=
{
choice
.
text
}
onClick
=
{
buttonClick
}
style
=
{
{
backgroundColor
:
selectedchoice
===
choice
.
text
?
"
#58ACFA
"
:
"
white
"
,
}
}
>
{
choice
.
text
}
</
button
>
</
div
>
))
}
<
label
className
=
"mt-3"
>
{
element
.
content
.
maxRateDescription
}
</
label
>
</
div
>
);
};
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment