質問編集履歴
2
Selectについてstyled-componentsを利用していたため追記
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -13,11 +13,19 @@
|
|
|
13
13
|
### 該当のソースコード
|
|
14
14
|
|
|
15
15
|
```js
|
|
16
|
+
import styled from "styled-components";
|
|
17
|
+
|
|
16
18
|
type Props = {
|
|
17
19
|
nowValue: string;
|
|
18
20
|
setState: React.Dispatch<React.SetStateAction<string>>;
|
|
19
21
|
listData: { label: string; value: string }[];
|
|
20
22
|
};
|
|
23
|
+
|
|
24
|
+
const Select = styled.select`
|
|
25
|
+
outline: none;
|
|
26
|
+
border-radius: 4px;
|
|
27
|
+
/* 略 */
|
|
28
|
+
`;
|
|
21
29
|
|
|
22
30
|
//中略
|
|
23
31
|
|
1
追加検証
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -57,3 +57,20 @@
|
|
|
57
57
|
{data.label}
|
|
58
58
|
</option>
|
|
59
59
|
```
|
|
60
|
+
|
|
61
|
+
### 試したこと(回答コメントを踏まえ)
|
|
62
|
+
テキストフォームと連動している仕様上、
|
|
63
|
+
`nowValue`が`listData`に含まれないケースがあり、整合性が取れていませんでした。
|
|
64
|
+
|
|
65
|
+
下記のように、含まれない場合は1つ目の選択肢になるように変更してみましたが、解消しませんでした。
|
|
66
|
+
また、setStateに送った値が`nowValue`になるまでの途中で変換されていることもありませんでした。
|
|
67
|
+
|
|
68
|
+
```js
|
|
69
|
+
<Select
|
|
70
|
+
onChange={(event) => {
|
|
71
|
+
props.setState(event.target.value);
|
|
72
|
+
}}
|
|
73
|
+
value={props.listData.find((e) => e.value === props.nowValue) ? props.nowValue : props.listData[0].value}
|
|
74
|
+
>
|
|
75
|
+
```
|
|
76
|
+
|