teratail
回答率
85.47%
質問するログイン新規登録
トップJavaScriptに関する質問Reactで編集機能を作りたい

編集履歴

回答編集履歴

5

テキスト修正

2019/10/06 05:03

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -382,7 +382,7 @@
382
382
 
383
383
 
384
384
 
385
- 上記に記載した、修正後のコードから、さらにリファクタリングした結果、 `App` は以下のようなコードになりました。
385
+ 上記に記載した修正後のコードから、さらにリファクタリングしたコードを挙げておきます。 `App` は以下のようなコードになりました。
386
386
 
387
387
 
388
388
 

4

テキスト修正

2019/10/06 05:03

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -472,25 +472,13 @@
472
472
 
473
473
 
474
474
 
475
- handleSelect = itemId => {
475
+ handleSelect = lesson => {
476
-
477
- const { lessons, form } = this.state
476
+
478
-
479
- if (form.id === itemId) {
477
+ this.setState(
480
-
478
+
481
- this.setState({ form: { ...initialForm } })
479
+ { form: { ...(this.state.form.id === lesson.id ? initialForm : lesson) } }
482
-
483
- } else {
480
+
484
-
485
- const lesson = lessons.find(e => e.id === itemId)
486
-
487
- if (lesson) {
488
-
489
- this.setState({ form: { ...lesson } })
490
-
491
- }
481
+ )
492
-
493
- }
494
482
 
495
483
  }
496
484
 
@@ -546,6 +534,8 @@
546
534
 
547
535
  export default App
548
536
 
537
+
538
+
549
539
  ```
550
540
 
551
541
 

3

テキスト修正

2019/10/05 17:09

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -590,4 +590,4 @@
590
590
 
591
591
 
592
592
 
593
- ご興味あれば、レポジトリをcloneしてSourcetree などで各修正コミットの内容を追って頂き、どういう意図の修正か不明な点などがあれば、コメントから質問頂ければ幸いです。
593
+ ご興味あれば、レポジトリをcloneしてSourcetree などで[各修正コミット](https://github.com/jun68ykt/q215244/commits/master)の内容を追って頂き、どういう意図の修正か不明な点などがあれば、コメントから質問頂ければ幸いです。

2

テキスト修正

2019/10/05 16:45

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -375,3 +375,219 @@
375
375
 
376
376
 
377
377
  修正前のままだと、同じ曜日に２つ以上のアイテムがあるとき、「keyが重複している要素がある」旨の警告がコンソールに出力されます。
378
+
379
+
380
+
381
+ ### 追記2
382
+
383
+
384
+
385
+ 上記に記載した、修正後のコードから、さらにリファクタリングした結果、 `App` は以下のようなコードになりました。
386
+
387
+
388
+
389
+ #### src/containers/App.js
390
+
391
+ ```jsx
392
+
393
+ import React from 'react'
394
+
395
+ import { Container, LessonForm, LessonsByDaysOfWeek, Title } from '../components'
396
+
397
+ import { nextId, INITIAL_ID } from '../utils'
398
+
399
+ import '../css/list.css'
400
+
401
+
402
+
403
+ const initialForm = {
404
+
405
+ id: 0, // 有効なidの値はINITIAL_ID以上
406
+
407
+ subject: "",
408
+
409
+ period: 0, // 1: １限, 2: ２限, ･･･ 5: ５限
410
+
411
+ dayOfWeek: -1, // 0: "月曜日", 1: "火曜日" ･･･ 4: "金曜日"
412
+
413
+ }
414
+
415
+
416
+
417
+ class App extends React.Component{
418
+
419
+ constructor(props) {
420
+
421
+ super(props)
422
+
423
+ this.state = {
424
+
425
+ lessons: [],
426
+
427
+ form: { ...initialForm }
428
+
429
+ }
430
+
431
+ }
432
+
433
+
434
+
435
+ handleSave = () => {
436
+
437
+ const { lessons, form } = this.state
438
+
439
+ if (!form.subject) return
440
+
441
+
442
+
443
+ const nextLessons = form.id >= INITIAL_ID
444
+
445
+ ? lessons.map(e => e.id === form.id ? { ...form } : e)
446
+
447
+ : [ ...lessons, { ...form, id: nextId() } ]
448
+
449
+
450
+
451
+ this.setState( { lessons: nextLessons, form: { ...initialForm } })
452
+
453
+ }
454
+
455
+
456
+
457
+ handleChange = event => {
458
+
459
+ const { name, value } = event.target
460
+
461
+ const form = {
462
+
463
+ ...this.state.form,
464
+
465
+ [name]: ['dayOfWeek', 'period'].includes(name) ? +value : value
466
+
467
+ }
468
+
469
+ this.setState({ form })
470
+
471
+ }
472
+
473
+
474
+
475
+ handleSelect = itemId => {
476
+
477
+ const { lessons, form } = this.state
478
+
479
+ if (form.id === itemId) {
480
+
481
+ this.setState({ form: { ...initialForm } })
482
+
483
+ } else {
484
+
485
+ const lesson = lessons.find(e => e.id === itemId)
486
+
487
+ if (lesson) {
488
+
489
+ this.setState({ form: { ...lesson } })
490
+
491
+ }
492
+
493
+ }
494
+
495
+ }
496
+
497
+
498
+
499
+ handleDelete = () => {
500
+
501
+ // TODO: 後で作成
502
+
503
+ }
504
+
505
+
506
+
507
+ render () {
508
+
509
+ return (
510
+
511
+ <Container>
512
+
513
+ <Title text="時間割" />
514
+
515
+ <LessonForm
516
+
517
+ {...this.state.form}
518
+
519
+ handleChange={this.handleChange}
520
+
521
+ handleSave={this.handleSave}
522
+
523
+ handleDelete={this.handleDelete}
524
+
525
+ />
526
+
527
+ <LessonsByDaysOfWeek
528
+
529
+ lessons={this.state.lessons}
530
+
531
+ selectedId={this.state.form.id}
532
+
533
+ handleSelect={this.handleSelect}
534
+
535
+ />
536
+
537
+ </Container>
538
+
539
+ );
540
+
541
+ }
542
+
543
+ }
544
+
545
+
546
+
547
+ export default App
548
+
549
+ ```
550
+
551
+
552
+
553
+ 上記の `App` と、import される他のコンポーネント含めて、以下のGitHub レポジトリに上げてあります。
554
+
555
+
556
+
557
+ - **Github:** [jun68ykt/q215244](https://github.com/jun68ykt/q215244)
558
+
559
+
560
+
561
+ 以下は、このレポジトリに関しての補足説明です。
562
+
563
+
564
+
565
+ - ベースを create-react-app で作成しており、以下のコマンドでアプリを起動できます。
566
+
567
+ ```shell-session
568
+
569
+ git clone https://github.com/jun68ykt/q215244.git
570
+
571
+ cd q215244
572
+
573
+ yarn install
574
+
575
+ yarn start
576
+
577
+ ```
578
+
579
+ - 以下の[３つのタグ](https://github.com/jun68ykt/q215244/tags) を付加しています。
580
+
581
+
582
+
583
+ `v1.0`: 質問に挙げられていたコード
584
+
585
+ `v2.0`: 編集できるようにして、回答に記載
586
+
587
+ `v3.0`: リファクタリング版
588
+
589
+
590
+
591
+
592
+
593
+ ご興味あれば、レポジトリをcloneしてSourcetree などで各修正コミットの内容を追って頂き、どういう意図の修正か不明な点などがあれば、コメントから質問頂ければ幸いです。

1

テキスト修正

2019/10/05 16:38

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -308,7 +308,7 @@
308
308
 
309
309
  {lists.map((l) =>(
310
310
 
311
- <div key={l.days}>
311
+ <div key={l.id}>
312
312
 
313
313
  <div
314
314
 
@@ -357,3 +357,21 @@
357
357
  上記の修正後のコードで何か不明点などあれば、コメント頂ければと思います。
358
358
 
359
359
  以上、参考になれば幸いです。
360
+
361
+
362
+
363
+ ### 追記
364
+
365
+
366
+
367
+ `Loop` の下記の箇所を修正しました。
368
+
369
+
370
+
371
+ - 修正前： `<div key={l.days}>`
372
+
373
+ - 修正後： `<div key={l.id}>`
374
+
375
+
376
+
377
+ 修正前のままだと、同じ曜日に２つ以上のアイテムがあるとき、「keyが重複している要素がある」旨の警告がコンソールに出力されます。