teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

1

テキスト追加

2021/10/01 04:04

投稿

退会済みユーザー
answer CHANGED
@@ -19,4 +19,103 @@
19
19
  ```javascript
20
20
  const switchTodos = () => radio === "all" ? todos : todos.filter(({ status }) => status === radio);
21
21
  ```
22
- に、一行でも書けるよってに。
22
+ に、一行でも書けるよってに。
23
+
24
+
25
+ ### 補足
26
+
27
+ 以下は本題とは無関係なお節介なので、時間あるときにでも読んでみてや。
28
+
29
+ ここんとこ
30
+ ```jsx
31
+ <form>
32
+ <label>
33
+ <input type="radio" value="all" onChange={(e) => setRadio(e.target.value)} checked={radio === "all"} />
34
+ 全て
35
+ </label>
36
+ <label>
37
+ <input
38
+ type="radio"
39
+ value="incomplete"
40
+ onChange={(e) => setRadio(e.target.value)}
41
+ checked={radio === "incomplete"}
42
+ />
43
+ 作業中
44
+ </label>
45
+ <label>
46
+ <input
47
+ type="radio"
48
+ value="completed"
49
+ onChange={(e) => setRadio(e.target.value)}
50
+ checked={radio === "completed"}
51
+ />
52
+ 完了
53
+ </label>
54
+ </form>
55
+ ```
56
+
57
+ <form>の中に、ラジオボタン3つ並べてるんやけど、似たようなコードのかたまりが3回連続するやん。そやから <label>から </label> までんとこ、別のコンポーネントに切り出すとええで。やり方の一例としては、こんなん
58
+
59
+ ```diff
60
+ import React, { useState } from "react";
61
+
62
+ +const FILTER_VALUES = [
63
+ + { value: "all", text: "全て" },
64
+ + { value: "incomplete", text: "作業中" },
65
+ + { value: "completed", text: "完了" }
66
+ +];
67
+ +
68
+ +const FilterButton = ({ value, text, checked, onChange }) => (
69
+ + <label>
70
+ + <input
71
+ + type="radio"
72
+ + value={value}
73
+ + onChange={(e) => onChange(e.target.value)}
74
+ + checked={checked}
75
+ + />
76
+ + {text}
77
+ + </label>
78
+ +);
79
+
80
+ //入力用 todos
81
+ //未完了のTodo用 comment
82
+
83
+ function App() {
84
+ const [todos, setTodos] = useState([]);
85
+ ```
86
+ を追加しといて、こうや。
87
+
88
+ ```diff
89
+ <form>
90
+ - <label>
91
+ - <input type="radio" value="all" onChange={(e) => setRadio(e.target.value)} checked={radio === "all"} />
92
+ - 全て
93
+ - </label>
94
+ - <label>
95
+ - <input
96
+ - type="radio"
97
+ - value="incomplete"
98
+ - onChange={(e) => setRadio(e.target.value)}
99
+ - checked={radio === "incomplete"}
100
+ - />
101
+ - 作業中
102
+ - </label>
103
+ - <label>
104
+ - <input
105
+ - type="radio"
106
+ - value="completed"
107
+ - onChange={(e) => setRadio(e.target.value)}
108
+ - checked={radio === "completed"}
109
+ + {FILTER_VALUES.map(({ value, text }) => (
110
+ + <FilterButton
111
+ + key={value}
112
+ + value={value}
113
+ + text={text}
114
+ + checked={radio === value}
115
+ + onChange={setRadio}
116
+ />
117
+ - 完了
118
+ - </label>
119
+ + ))}
120
+ </form>
121
+ ```