回答編集履歴
1
コメントでの指摘を受けて修正
test
CHANGED
|
@@ -1,4 +1,8 @@
|
|
|
1
1
|
`useState`で`active`の状態を管理させてはどうでしょうか？
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
|
|
5
|
+
**コメントの指摘を受けて修正しました。**
|
|
2
6
|
|
|
3
7
|
|
|
4
8
|
|
|
@@ -10,7 +14,9 @@
|
|
|
10
14
|
|
|
11
15
|
const month = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
|
|
12
16
|
|
|
17
|
+
const [selectedMonth, setSelectedMonth] = useState("年");
|
|
18
|
+
|
|
13
|
-
const [isActive, setIsActive] = useState(false);
|
|
19
|
+
const [isSelectedActive, setIsSelectedActive] = useState(false);
|
|
14
20
|
|
|
15
21
|
const selected = useRef(null);
|
|
16
22
|
|
|
@@ -20,19 +26,27 @@
|
|
|
20
26
|
|
|
21
27
|
|
|
22
28
|
|
|
23
|
-
const Click = () => {
|
|
29
|
+
const handleClickSelected = () => {
|
|
24
30
|
|
|
25
31
|
console.log(selected.current);
|
|
26
32
|
|
|
27
33
|
console.log(optionContainer.current);
|
|
28
34
|
|
|
29
|
-
setIsActive(true);
|
|
35
|
+
setIsSelectedActive(true);
|
|
30
|
-
|
|
31
|
-
// ClickでON/OFFを切り替えたい場合は下記
|
|
32
|
-
|
|
33
|
-
// setIsActive(!isActive)
|
|
34
36
|
|
|
35
37
|
};
|
|
38
|
+
|
|
39
|
+
|
|
40
|
+
|
|
41
|
+
const handleClickOption = (month) => {
|
|
42
|
+
|
|
43
|
+
setSelectedMonth(month);
|
|
44
|
+
|
|
45
|
+
setIsSelectedActive(false);
|
|
46
|
+
|
|
47
|
+
};
|
|
48
|
+
|
|
49
|
+
|
|
36
50
|
|
|
37
51
|
return (
|
|
38
52
|
|
|
@@ -40,11 +54,11 @@
|
|
|
40
54
|
|
|
41
55
|
<SelectBox>
|
|
42
56
|
|
|
43
|
-
<div className="option-container" ref={optionContainer}>
|
|
57
|
+
<div className={"option-container" + isSelectedActive? : " active" : ""} ref={optionContainer}>
|
|
44
58
|
|
|
45
59
|
{month.map((month, i) => (
|
|
46
60
|
|
|
47
|
-
<div className="option" key={i} ref={optionList}>
|
|
61
|
+
<div className="option" key={i} ref={optionList} onClick={()=>{handleClickOption(month.toString())}}>
|
|
48
62
|
|
|
49
63
|
<input type="radio" className="radio" />
|
|
50
64
|
|
|
@@ -60,9 +74,9 @@
|
|
|
60
74
|
|
|
61
75
|
</div>
|
|
62
76
|
|
|
63
|
-
<div className=
|
|
77
|
+
<div className="selected" ref={selected} onClick={handleClickSelected}>
|
|
64
78
|
|
|
65
|
-
|
|
79
|
+
{selectedMonth}
|
|
66
80
|
|
|
67
81
|
</div>
|
|
68
82
|
|