teratail
回答率
85.35%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問【react】Todoリストの追加したタスクの表示・非表示を切り替えたい。

編集履歴

質問編集履歴

7

文章訂正

2021/10/01 03:26

投稿

edu
edu

スコア35

test CHANGED
File without changes
test CHANGED
@@ -18,7 +18,7 @@
18
18
 
19
19
  ラジオボタンをクリックしても、追加したタスクが表示/非表示にならず、
20
20
 
21
- 期待する動作をしない状況で、原因不明で詰まっています。
21
+ 期待する動作をしない状況で、詰まっています。
22
22
 
23
23
  何方かアドバイスをお願いします。**
24
24
 

6

文章訂正

2021/10/01 03:26

投稿

edu
edu

スコア35

test CHANGED
File without changes
test CHANGED
@@ -16,9 +16,9 @@
16
16
 
17
17
  改めてソースコードを入力したが、
18
18
 
19
- ラジオボタンをクリックしても、追加したタスクが表示/非表示にならず
19
+ ラジオボタンをクリックしても、追加したタスクが表示/非表示にならず、
20
-
20
+
21
- 期待する動作をしない状況で、原因がわからず詰まっています。
21
+ 期待する動作をしない状況で、原因不明で詰まっています。
22
22
 
23
23
  何方かアドバイスをお願いします。**
24
24
 

5

文章訂正

2021/10/01 03:04

投稿

edu
edu

スコア35

test CHANGED
File without changes
test CHANGED
@@ -16,7 +16,9 @@
16
16
 
17
17
  改めてソースコードを入力したが、
18
18
 
19
+ ラジオボタンをクリックしても、追加したタスクが表示/非表示にならず
20
+
19
- 期待する動作をしない状況で詰まっています。
21
+ 期待する動作をしない状況で、原因がわからず詰まっています。
20
22
 
21
23
  何方かアドバイスをお願いします。**
22
24
 
@@ -32,7 +34,7 @@
32
34
 
33
35
  **現在の状況**
34
36
 
35
- ソースコードを入力したが、期待する動作にならない。
37
+ ソースコードを入力したが、ラジオボタンをクリックしても、追加したタスクが表示/非表示にならない。
36
38
 
37
39
  検証ツールで、エラー表示が出ないので、何処に問題があるのかわからない。
38
40
 

4

文章訂正

2021/10/01 03:03

投稿

edu
edu

スコア35

test CHANGED
File without changes
test CHANGED
@@ -8,11 +8,17 @@
8
8
 
9
9
 
10
10
 
11
+ **以前、このサイトで質問をした際、エラーが出るのは、
12
+
11
- 以前、このサイトで質問をした際、エラーが出る原因は、TypeScriptのソースコードを入力したのが原因とこのサイトで教えて頂きました。
13
+ 『TypeScriptのソースコードを入力したのが原因』とこのサイトで教えて頂きました。**
12
-
14
+
13
- 再度、reactの関数コンポーネントのサンプルを探し、ソースコードを入力したが、期待する動作をしない状況で詰まっています。
15
+ **再度、reactの関数コンポーネントのサンプルを探し、
16
+
14
-
17
+ 改めてソースコードを入力したが、
18
+
19
+ 期待する動作をしない状況で詰まっています。
20
+
15
- 何方かアドバイスをお願いします。
21
+ 何方かアドバイスをお願いします。**
16
22
 
17
23
 
18
24
 

3

文章訂正

2021/10/01 02:53

投稿

edu
edu

スコア35

test CHANGED
File without changes
test CHANGED
@@ -8,7 +8,9 @@
8
8
 
9
9
 
10
10
 
11
+ 以前、このサイトで質問をした際、エラーが出る原因は、TypeScriptのソースコードを入力したのが原因とこのサイトで教えて頂きました。
12
+
11
- 関数コンポーネントのサンプルを探し、ソースコードを入力したが、期待する動作をしない状況で詰まっています。
13
+ 再度、reactの関数コンポーネントのサンプルを探し、ソースコードを入力したが、期待する動作をしない状況で詰まっています。
12
14
 
13
15
  何方かアドバイスをお願いします。
14
16
 

2

文章訂正

2021/10/01 02:49

投稿

edu
edu

スコア35

test CHANGED
File without changes
test CHANGED
@@ -32,13 +32,9 @@
32
32
 
33
33
  **問題解決の為に行ったこと**
34
34
 
35
- ① 『eslint-disable-next-line』の表示が出たので、該当する行に入力して表示が『Compiled successfully!』に変わったが、
36
-
37
- ラジオボタンを押しても追加したタスクの表示は変わらなかった。
38
-
39
- ②検証ツールを見ても、エラーの表示はなかった。
35
+ ① 検証ツールを見ても、エラーの表示はなかった。
36
+
40
-
37
+ ② ソースコードの書き間違いがないか確認した。
41
-
42
38
 
43
39
 
44
40
 

1

コード訂正

2021/10/01 01:07

投稿

edu
edu

スコア35

test CHANGED
File without changes
test CHANGED
@@ -66,12 +66,6 @@
66
66
 
67
67
 
68
68
 
69
- const onChangeTodo = (e) => {
70
-
71
- setComment(e.target.value);
72
-
73
- };
74
-
75
69
  const addTodo = () => {
76
70
 
77
71
  if (comment === "") return;
@@ -106,7 +100,7 @@
106
100
 
107
101
  };
108
102
 
109
- const toggle = (todoId) => {
103
+ const toggle = (todoId) => {
110
104
 
111
105
  setTodos(
112
106
 
@@ -130,7 +124,7 @@
130
124
 
131
125
  };
132
126
 
133
- // eslint-disable-next-line
127
+
134
128
 
135
129
  const switchTodos = () => {
136
130
 
@@ -150,7 +144,9 @@
150
144
 
151
145
  };
152
146
 
147
+
148
+
153
- return (
149
+ return (
154
150
 
155
151
  <div className="App-header">
156
152
 
@@ -162,21 +158,27 @@
162
158
 
163
159
  <label>
164
160
 
161
+ <input type="radio" value="all" onChange={(e) => setRadio(e.target.value)} checked={radio === "all"} />
162
+
163
+ 全て
164
+
165
+ </label>
166
+
167
+ <label>
168
+
165
169
  <input
166
170
 
167
171
  type="radio"
168
172
 
169
- value="all"
173
+ value="incomplete"
170
-
171
- name="Todo"
172
174
 
173
175
  onChange={(e) => setRadio(e.target.value)}
174
176
 
175
- checked={radio === "all"}
177
+ checked={radio === "incomplete"}
176
178
 
177
179
  />
178
180
 
179
- 全て
181
+ 作業中
180
182
 
181
183
  </label>
182
184
 
@@ -186,42 +188,22 @@
186
188
 
187
189
  type="radio"
188
190
 
189
- value="incomplete"
191
+ value="completed"
190
-
191
- name="Todo"
192
192
 
193
193
  onChange={(e) => setRadio(e.target.value)}
194
194
 
195
- checked={radio === "incomplete"}
195
+ checked={radio === "completed"}
196
196
 
197
197
  />
198
198
 
199
- 作業中
199
+ 完了
200
200
 
201
201
  </label>
202
202
 
203
- <label>
204
-
205
- <input
206
-
207
- type="radio"
208
-
209
- value="completed"
210
-
211
- name="Todo"
212
-
213
- onChange={(e) => setRadio(e.target.value)}
214
-
215
- checked={radio === "completed"}
216
-
217
- />
218
-
219
- 完了
220
-
221
- </label>
222
-
223
203
  </form>
224
204
 
205
+
206
+
225
207
  <table>
226
208
 
227
209
  <thead>
@@ -240,7 +222,7 @@
240
222
 
241
223
  <tbody>
242
224
 
243
- {todos.map((todo, index) => {
225
+ {switchTodos().map((todo, index) => {
244
226
 
245
227
  return (
246
228
 
@@ -256,7 +238,7 @@
256
238
 
257
239
  <button onClick={() => onClickDelete(index)}>削除</button>
258
240
 
259
- </td>
241
+ </td>
260
242
 
261
243
  </tr>
262
244
 
@@ -268,11 +250,15 @@
268
250
 
269
251
  </table>
270
252
 
253
+
254
+
271
255
  <div>
272
256
 
273
257
  <h2>新規タスクの追加</h2>
274
258
 
259
+
260
+
275
- <input placeholder="Enter a new TODO" value={comment} onChange={onChangeTodo} />
261
+ <input placeholder="Enter a new TODO" value={comment} onChange={(e) => setComment(e.target.value)} />
276
262
 
277
263
  <button onClick={addTodo}>追加</button>
278
264
 
@@ -284,6 +270,8 @@
284
270
 
285
271
  }
286
272
 
273
+
274
+
287
275
  export default App;
288
276
 
289
277
  ```