回答編集履歴
1
コメントでの指摘を受けて修正
answer
CHANGED
|
@@ -1,27 +1,34 @@
|
|
|
1
1
|
`useState`で`active`の状態を管理させてはどうでしょうか？
|
|
2
2
|
|
|
3
|
+
**コメントの指摘を受けて修正しました。**
|
|
3
4
|
|
|
5
|
+
|
|
4
6
|
```javascript
|
|
5
7
|
export const SelectDate: FunctionComponent = () => {
|
|
6
8
|
const month = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
|
|
9
|
+
const [selectedMonth, setSelectedMonth] = useState("年");
|
|
7
|
-
const [
|
|
10
|
+
const [isSelectedActive, setIsSelectedActive] = useState(false);
|
|
8
11
|
const selected = useRef(null);
|
|
9
12
|
const optionContainer = useRef(null);
|
|
10
13
|
const optionList = useRef(null);
|
|
11
14
|
|
|
12
|
-
const
|
|
15
|
+
const handleClickSelected = () => {
|
|
13
16
|
console.log(selected.current);
|
|
14
17
|
console.log(optionContainer.current);
|
|
15
|
-
|
|
18
|
+
setIsSelectedActive(true);
|
|
16
|
-
// ClickでON/OFFを切り替えたい場合は下記
|
|
17
|
-
// setIsActive(!isActive)
|
|
18
19
|
};
|
|
20
|
+
|
|
21
|
+
const handleClickOption = (month) => {
|
|
22
|
+
setSelectedMonth(month);
|
|
23
|
+
setIsSelectedActive(false);
|
|
24
|
+
};
|
|
25
|
+
|
|
19
26
|
return (
|
|
20
27
|
<Container>
|
|
21
28
|
<SelectBox>
|
|
22
|
-
<div className="option-container" ref={optionContainer}>
|
|
29
|
+
<div className={"option-container" + isSelectedActive? : " active" : ""} ref={optionContainer}>
|
|
23
30
|
{month.map((month, i) => (
|
|
24
|
-
<div className="option" key={i} ref={optionList}>
|
|
31
|
+
<div className="option" key={i} ref={optionList} onClick={()=>{handleClickOption(month.toString())}}>
|
|
25
32
|
<input type="radio" className="radio" />
|
|
26
33
|
<label htmlFor="automobiles">
|
|
27
34
|
<p className="name">{month}月</p>
|
|
@@ -29,8 +36,8 @@
|
|
|
29
36
|
</div>
|
|
30
37
|
))}
|
|
31
38
|
</div>
|
|
32
|
-
<div className=
|
|
39
|
+
<div className="selected" ref={selected} onClick={handleClickSelected}>
|
|
33
|
-
|
|
40
|
+
{selectedMonth}
|
|
34
41
|
</div>
|
|
35
42
|
</SelectBox>
|
|
36
43
|
</Container>
|