teratail
回答率
85.47%
質問するログイン新規登録
トップに関する質問reactを使ったtodoアプリにてチェックボックスをチェック後、ボタンをクリックしてチェックされた箇所を削除したい！

編集履歴

質問編集履歴

4

タイトルの変更

2021/01/12 14:14

投稿

suzukitoshinari
suzukitoshinari

スコア6

test CHANGED
@@ -1 +1 @@
1
- reactを使ったtodoアプリにおけるチェックされたら削除する機能について
1
+ reactを使ったtodoアプリにてチェックボックスをチェック後、ボタンをクリックしてチェックされた箇所を削除したい！
test CHANGED
File without changes

3

タグの更新

2021/01/12 14:14

投稿

suzukitoshinari
suzukitoshinari

スコア6

test CHANGED
File without changes
test CHANGED
File without changes

2

ソースコードの変更

2021/01/12 12:16

投稿

suzukitoshinari
suzukitoshinari

スコア6

test CHANGED
File without changes
test CHANGED
@@ -10,6 +10,8 @@
10
10
 
11
11
  ### 該当のソースコード
12
12
 
13
+ ```ここに言語を入力
14
+
13
15
  import React, { useState }　from 'react';
14
16
 
15
17
  import { makeStyles } from '@material-ui/core/styles';
@@ -359,3 +361,7 @@
359
361
 
360
362
 
361
363
  export default StickyTable;
364
+
365
+ コード
366
+
367
+ ```

1

ソースコードの修正

2021/01/12 11:45

投稿

suzukitoshinari
suzukitoshinari

スコア6

test CHANGED
File without changes
test CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  現在reactでtodo形式の単語登録アプリを作成しています。
4
4
 
5
- チェックボックスでチェックしたら該当箇所を削除したいのですが、できません。
5
+ チェックボックスでチェックした後に、削除ボタンを押したら該当箇所を削除したいのですが、できません。
6
6
 
7
7
  かれこれ一カ月試行錯誤しましたができませんでした。
8
8
 
@@ -10,12 +10,6 @@
10
10
 
11
11
  ### 該当のソースコード
12
12
 
13
-
14
-
15
- ```ここに言語名を入力　react
16
-
17
-
18
-
19
13
  import React, { useState }　from 'react';
20
14
 
21
15
  import { makeStyles } from '@material-ui/core/styles';
@@ -108,11 +102,11 @@
108
102
 
109
103
  const [words, setWord] = useState([]),
110
104
 
111
- [newWord, setNewWord] = useState('');
105
+ [newWord, setNewWord] = useState(''),
112
-
106
+
113
- // [meanings, setMeaning] = useState([]),
107
+ [meanings, setMeaning] = useState([]),
114
-
108
+
115
- // [newMeaning, setNewMeaning] = useState('');
109
+ [newMeaning, setNewMeaning] = useState('');
116
110
 
117
111
 
118
112
 
@@ -122,53 +116,53 @@
122
116
 
123
117
  }
124
118
 
125
- // const handleNewMeaning = (e) => {
119
+ const handleNewMeaning = (e) => {
126
-
120
+
127
- // setNewMeaning(e.target.value);
121
+ setNewMeaning(e.target.value);
128
-
122
+
129
- // };
123
+ };
130
-
131
-
132
-
124
+
125
+
126
+
133
- // const koko = () => {
127
+ const koko = () => {
134
-
128
+
135
- // if(words && newWord === '' || newMeaning === '') {
129
+ if(words && newWord === '' || newMeaning === '') {
136
-
130
+
137
- // alert('単語と意味の両方を入力してください。');
131
+ alert('単語と意味の両方を入力してください。');
138
-
132
+
139
- // setNewWord('');
133
+ setNewWord('');
140
-
134
+
141
- // setNewMeaning('');
135
+ setNewMeaning('');
142
-
136
+
143
- // return;
137
+ return;
144
-
138
+
145
- // } else if(newWord.match(/[^A-Za-z0-9]+/)) {
139
+ } else if(newWord.match(/[^A-Za-z0-9]+/)) {
146
-
140
+
147
- // alert('英語で入力してください。');
141
+ alert('英語で入力してください。');
148
-
142
+
149
- // setNewWord('');
143
+ setNewWord('');
150
-
144
+
151
- // setNewMeaning('');
145
+ setNewMeaning('');
152
-
146
+
153
- // return;
147
+ return;
154
-
148
+
155
- // } else {
149
+ } else {
156
-
150
+
157
- // handleAddWord();
151
+ handleAddWord();
158
-
152
+
159
- // handleAddMeaning();
153
+ handleAddMeaning();
160
-
161
- // }
154
+
162
-
163
- // }
155
+ }
156
+
164
-
157
+ }
165
-
166
-
158
+
159
+
160
+
167
- // const onClickAdd = () => {
161
+ const onClickAdd = () => {
168
-
162
+
169
- // 　koko();
163
+ 　koko();
170
-
164
+
171
- // }
165
+ }
172
166
 
173
167
 
174
168
 
@@ -190,91 +184,91 @@
190
184
 
191
185
 
192
186
 
193
- // const handleAddMeaning = () => {
194
-
195
- // // e.preventDefault()
196
-
197
- // // const id = meanings.length ? meanings[meanings.length - 1].id + 1 : 0;
198
-
199
- // setMeaning([...meanings, {
200
-
201
- // id: Date.now(), content: newMeaning, isCompleted: false
202
-
203
- // }])
204
-
205
- // setNewMeaning('');
206
-
207
- // }
208
-
209
-
210
-
211
- // const handleDeleteWord = (id) => {
212
-
213
- // // const id = words.length ? words[words.length - 1].id + 1 : 0;
214
-
215
- // setWord(words.filter((word) => word.id !== id));
216
-
217
- // }
218
-
219
-
220
-
221
- // const handleDeleteMeaning = (id) => {
222
-
223
- // setMeaning(meanings.filter((meaning) => meaning.id !== id));
224
-
225
- // }
226
-
227
-
228
-
229
- // const onClickDelete = () => {
230
-
231
- // handleDeleteWord();
232
-
233
- // // handleDeleteMeaning();
234
-
235
- // }
236
-
237
-
238
-
239
- // const toggleDeleteWord = (id) => {
240
-
241
- // setWord(words.map(word => {
242
-
243
- // if (word.id === id) {
244
-
245
- // return {...word, isCompleted: !word.isCompleted}
246
-
247
- // }
248
-
249
- // return word
250
-
251
- // }))
252
-
253
- // }
254
-
255
-
256
-
257
- // const toggleDeleteMeaning = (id) => {
258
-
259
- // setMeaning(meanings.filter(meaning => {
260
-
261
- // if (meaning.id === id) meaning.isCompleted = !meaning.isCompleted
262
-
263
- // return meaning
264
-
265
- // }))
266
-
267
- // }
268
-
269
-
270
-
271
- // const toggleDelete = (id) => {
272
-
273
- // toggleDeleteWord(id);
274
-
275
- // // toggleDeleteMeaning();
276
-
277
- // }
187
+ const handleAddMeaning = () => {
188
+
189
+ // e.preventDefault()
190
+
191
+ // const id = meanings.length ? meanings[meanings.length - 1].id + 1 : 0;
192
+
193
+ setMeaning([...meanings, {
194
+
195
+ id: Date.now(), content: newMeaning, isCompleted: false
196
+
197
+ }])
198
+
199
+ setNewMeaning('');
200
+
201
+ }
202
+
203
+
204
+
205
+ const handleDeleteWord = (id) => {
206
+
207
+ // const id = words.length ? words[words.length - 1].id + 1 : 0;
208
+
209
+ setWord(words.filter((word) => word.id !== id));
210
+
211
+ }
212
+
213
+
214
+
215
+ const handleDeleteMeaning = (id) => {
216
+
217
+ setMeaning(meanings.filter((meaning) => meaning.id !== id));
218
+
219
+ }
220
+
221
+
222
+
223
+ const onClickDelete = () => {
224
+
225
+ handleDeleteWord();
226
+
227
+ handleDeleteMeaning();
228
+
229
+ }
230
+
231
+
232
+
233
+ const toggleDeleteWord = (id) => {
234
+
235
+ setWord(words.map(word => {
236
+
237
+ if (word.id === id) {
238
+
239
+ return {...word, isCompleted: !word.isCompleted}
240
+
241
+ }
242
+
243
+ return word
244
+
245
+ }))
246
+
247
+ }
248
+
249
+
250
+
251
+ const toggleDeleteMeaning = (id) => {
252
+
253
+ setMeaning(meanings.filter(meaning => {
254
+
255
+ if (meaning.id === id) meaning.isCompleted = !meaning.isCompleted
256
+
257
+ return meaning
258
+
259
+ }))
260
+
261
+ }
262
+
263
+
264
+
265
+ const toggleDelete = (id) => {
266
+
267
+ toggleDeleteWord(id);
268
+
269
+ toggleDeleteMeaning();
270
+
271
+ }
278
272
 
279
273
 
280
274
 
@@ -288,19 +282,19 @@
288
282
 
289
283
  <TextField label='単語' value={newWord} onChange={handleNewWord}/>
290
284
 
291
- <TextField label='意味' value={newWord} onChange={handleNewWord}/>
285
+ <TextField label='意味' value={newMeaning} onChange={handleNewMeaning}/>
292
-
286
+
293
- <button type='button' onClick={handleAddWord}>
287
+ <button type='button' onClick={onClickAdd}>
294
288
 
295
289
  登録する
296
290
 
297
291
  </button>
298
292
 
299
- {/* <button onClick={onClickDelete}>
293
+ <button onClick={onClickDelete}>
300
294
 
301
295
  削除
302
296
 
303
- </button> */}
297
+ </button>
304
298
 
305
299
  </form>
306
300
 
@@ -312,7 +306,7 @@
312
306
 
313
307
  <ListItem key={id} component='li' className={classes.item}>
314
308
 
315
- {/* <Checkbox
309
+ <Checkbox
316
310
 
317
311
  color="primary"
318
312
 
@@ -322,7 +316,7 @@
322
316
 
323
317
  defaultChecked={word.isCompleted}
324
318
 
325
- /> */}
319
+ />
326
320
 
327
321
  {word.item}
328
322
 
@@ -332,7 +326,7 @@
332
326
 
333
327
  </List>
334
328
 
335
- {/* <List component='ol' className={classes.list}>
329
+ <List component='ol' className={classes.list}>
336
330
 
337
331
  {meanings.map((meaning, id) => (
338
332
 
@@ -346,16 +340,6 @@
346
340
 
347
341
  </List>
348
342
 
349
- <List>
350
-
351
- <button onClick={onClickDelete}>
352
-
353
- 削除
354
-
355
- </button>
356
-
357
- </List> */}
358
-
359
343
  {/* <div>
360
344
 
361
345
  // {items.length} items
@@ -375,23 +359,3 @@
375
359
 
376
360
 
377
361
  export default StickyTable;
378
-
379
- ソースコード
380
-
381
- ```
382
-
383
-
384
-
385
- ### 試したこと
386
-
387
-
388
-
389
- ここに問題に対して試したことを記載してください。
390
-
391
-
392
-
393
- ### 補足情報（FW/ツールのバージョンなど）
394
-
395
-
396
-
397
- ここにより詳細な情報を記載してください。