質問編集履歴
7
文章訂正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
**再度、reactの関数コンポーネントのサンプルを探し、
|
|
9
9
|
改めてソースコードを入力したが、
|
|
10
10
|
ラジオボタンをクリックしても、追加したタスクが表示/非表示にならず、
|
|
11
|
-
期待する動作をしない状況で、
|
|
11
|
+
期待する動作をしない状況で、詰まっています。
|
|
12
12
|
何方かアドバイスをお願いします。**
|
|
13
13
|
|
|
14
14
|
**期待する動作**
|
6
文章訂正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -7,8 +7,8 @@
|
|
|
7
7
|
『TypeScriptのソースコードを入力したのが原因』とこのサイトで教えて頂きました。**
|
|
8
8
|
**再度、reactの関数コンポーネントのサンプルを探し、
|
|
9
9
|
改めてソースコードを入力したが、
|
|
10
|
-
ラジオボタンをクリックしても、追加したタスクが表示/非表示にならず
|
|
10
|
+
ラジオボタンをクリックしても、追加したタスクが表示/非表示にならず、
|
|
11
|
-
期待する動作をしない状況で、原因
|
|
11
|
+
期待する動作をしない状況で、原因不明で詰まっています。
|
|
12
12
|
何方かアドバイスをお願いします。**
|
|
13
13
|
|
|
14
14
|
**期待する動作**
|
5
文章訂正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -7,7 +7,8 @@
|
|
|
7
7
|
『TypeScriptのソースコードを入力したのが原因』とこのサイトで教えて頂きました。**
|
|
8
8
|
**再度、reactの関数コンポーネントのサンプルを探し、
|
|
9
9
|
改めてソースコードを入力したが、
|
|
10
|
+
ラジオボタンをクリックしても、追加したタスクが表示/非表示にならず
|
|
10
|
-
期待する動作をしない状況で詰まっています。
|
|
11
|
+
期待する動作をしない状況で、原因がわからず詰まっています。
|
|
11
12
|
何方かアドバイスをお願いします。**
|
|
12
13
|
|
|
13
14
|
**期待する動作**
|
|
@@ -15,7 +16,7 @@
|
|
|
15
16
|
② 選択されたラジオボタンに応じて、タスクの表示を切り替える
|
|
16
17
|
|
|
17
18
|
**現在の状況**
|
|
18
|
-
ソースコードを入力したが、
|
|
19
|
+
ソースコードを入力したが、ラジオボタンをクリックしても、追加したタスクが表示/非表示にならない。
|
|
19
20
|
検証ツールで、エラー表示が出ないので、何処に問題があるのかわからない。
|
|
20
21
|
|
|
21
22
|
**問題解決の為に行ったこと**
|
4
文章訂正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -3,9 +3,12 @@
|
|
|
3
3
|
todoリストのラジオボタンの『全て』『作業中』『完了』をクリックすると追加したタスクのボタンに合わせて、
|
|
4
4
|
表示・非表示になるようにしたいです。
|
|
5
5
|
|
|
6
|
+
**以前、このサイトで質問をした際、エラーが出るのは、
|
|
6
|
-
|
|
7
|
+
『TypeScriptのソースコードを入力したのが原因』とこのサイトで教えて頂きました。**
|
|
7
|
-
再度、reactの関数コンポーネントのサンプルを探し、
|
|
8
|
+
**再度、reactの関数コンポーネントのサンプルを探し、
|
|
9
|
+
改めてソースコードを入力したが、
|
|
10
|
+
期待する動作をしない状況で詰まっています。
|
|
8
|
-
何方かアドバイスをお願いします。
|
|
11
|
+
何方かアドバイスをお願いします。**
|
|
9
12
|
|
|
10
13
|
**期待する動作**
|
|
11
14
|
① タスクの状態によって表示/非表示を切り替えできる
|
3
文章訂正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -3,7 +3,8 @@
|
|
|
3
3
|
todoリストのラジオボタンの『全て』『作業中』『完了』をクリックすると追加したタスクのボタンに合わせて、
|
|
4
4
|
表示・非表示になるようにしたいです。
|
|
5
5
|
|
|
6
|
+
以前、このサイトで質問をした際、エラーが出る原因は、TypeScriptのソースコードを入力したのが原因とこのサイトで教えて頂きました。
|
|
6
|
-
関数コンポーネントのサンプルを探し、ソースコードを入力したが、期待する動作をしない状況で詰まっています。
|
|
7
|
+
再度、reactの関数コンポーネントのサンプルを探し、ソースコードを入力したが、期待する動作をしない状況で詰まっています。
|
|
7
8
|
何方かアドバイスをお願いします。
|
|
8
9
|
|
|
9
10
|
**期待する動作**
|
2
文章訂正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -15,11 +15,9 @@
|
|
|
15
15
|
検証ツールで、エラー表示が出ないので、何処に問題があるのかわからない。
|
|
16
16
|
|
|
17
17
|
**問題解決の為に行ったこと**
|
|
18
|
-
① 『eslint-disable-next-line』の表示が出たので、該当する行に入力して表示が『Compiled successfully!』に変わったが、
|
|
19
|
-
ラジオボタンを押しても追加したタスクの表示は変わらなかった。
|
|
20
|
-
|
|
18
|
+
① 検証ツールを見ても、エラーの表示はなかった。
|
|
19
|
+
② ソースコードの書き間違いがないか確認した。
|
|
21
20
|
|
|
22
|
-
|
|
23
21
|
```App.js
|
|
24
22
|
|
|
25
23
|
import React, { useState } from "react";
|
1
コード訂正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -32,9 +32,6 @@
|
|
|
32
32
|
const [comment, setComment] = useState("");
|
|
33
33
|
const [radio, setRadio] = useState("all");
|
|
34
34
|
|
|
35
|
-
const onChangeTodo = (e) => {
|
|
36
|
-
setComment(e.target.value);
|
|
37
|
-
};
|
|
38
35
|
const addTodo = () => {
|
|
39
36
|
if (comment === "") return;
|
|
40
37
|
|
|
@@ -52,7 +49,7 @@
|
|
|
52
49
|
setTodos(newTodos);
|
|
53
50
|
setTodos(newTodos.map((e, i) => ({ ...e, id: i + 1 })));
|
|
54
51
|
};
|
|
55
|
-
const toggle = (todoId) => {
|
|
52
|
+
const toggle = (todoId) => {
|
|
56
53
|
setTodos(
|
|
57
54
|
todos.map((todo, i) =>
|
|
58
55
|
todoId === todo.id
|
|
@@ -64,7 +61,7 @@
|
|
|
64
61
|
)
|
|
65
62
|
);
|
|
66
63
|
};
|
|
67
|
-
|
|
64
|
+
|
|
68
65
|
const switchTodos = () => {
|
|
69
66
|
if (radio === "complete") {
|
|
70
67
|
return todos.filter((todo) => todo.complete);
|
|
@@ -74,26 +71,20 @@
|
|
|
74
71
|
}
|
|
75
72
|
return todos;
|
|
76
73
|
};
|
|
74
|
+
|
|
77
|
-
return (
|
|
75
|
+
return (
|
|
78
76
|
<div className="App-header">
|
|
79
77
|
<h1>TODOリスト</h1>
|
|
80
78
|
|
|
81
79
|
<form>
|
|
82
80
|
<label>
|
|
83
|
-
<input
|
|
84
|
-
type="radio"
|
|
85
|
-
value="all"
|
|
86
|
-
name="Todo"
|
|
87
|
-
|
|
81
|
+
<input type="radio" value="all" onChange={(e) => setRadio(e.target.value)} checked={radio === "all"} />
|
|
88
|
-
checked={radio === "all"}
|
|
89
|
-
/>
|
|
90
82
|
全て
|
|
91
83
|
</label>
|
|
92
84
|
<label>
|
|
93
85
|
<input
|
|
94
86
|
type="radio"
|
|
95
87
|
value="incomplete"
|
|
96
|
-
name="Todo"
|
|
97
88
|
onChange={(e) => setRadio(e.target.value)}
|
|
98
89
|
checked={radio === "incomplete"}
|
|
99
90
|
/>
|
|
@@ -103,13 +94,13 @@
|
|
|
103
94
|
<input
|
|
104
95
|
type="radio"
|
|
105
96
|
value="completed"
|
|
106
|
-
name="Todo"
|
|
107
97
|
onChange={(e) => setRadio(e.target.value)}
|
|
108
98
|
checked={radio === "completed"}
|
|
109
99
|
/>
|
|
110
100
|
完了
|
|
111
101
|
</label>
|
|
112
102
|
</form>
|
|
103
|
+
|
|
113
104
|
<table>
|
|
114
105
|
<thead>
|
|
115
106
|
<tr>
|
|
@@ -119,7 +110,7 @@
|
|
|
119
110
|
</tr>
|
|
120
111
|
</thead>
|
|
121
112
|
<tbody>
|
|
122
|
-
{
|
|
113
|
+
{switchTodos().map((todo, index) => {
|
|
123
114
|
return (
|
|
124
115
|
<tr key={todo.id}>
|
|
125
116
|
<td>{todo.id}</td>
|
|
@@ -127,20 +118,23 @@
|
|
|
127
118
|
<td>
|
|
128
119
|
<button onClick={() => toggle(todo.id)}>{todo.status === "incomplete" ? "作業中" : "完了"}</button>
|
|
129
120
|
<button onClick={() => onClickDelete(index)}>削除</button>
|
|
130
|
-
|
|
121
|
+
</td>
|
|
131
122
|
</tr>
|
|
132
123
|
);
|
|
133
124
|
})}
|
|
134
125
|
</tbody>
|
|
135
126
|
</table>
|
|
127
|
+
|
|
136
128
|
<div>
|
|
137
129
|
<h2>新規タスクの追加</h2>
|
|
130
|
+
|
|
138
|
-
<input placeholder="Enter a new TODO" value={comment} onChange={
|
|
131
|
+
<input placeholder="Enter a new TODO" value={comment} onChange={(e) => setComment(e.target.value)} />
|
|
139
132
|
<button onClick={addTodo}>追加</button>
|
|
140
133
|
</div>
|
|
141
134
|
</div>
|
|
142
135
|
);
|
|
143
136
|
}
|
|
137
|
+
|
|
144
138
|
export default App;
|
|
145
139
|
```
|
|
146
140
|
```index.js
|