我想說的是
React有明確規定，子組件時不能操作父組件裡的資料，所以需要調用父組件的方法，來修改父組件的內容
有了 JSX 撰寫起來容易多了

上一篇中我們成功的把按摩服務列表拆分成獨立組件
並且把父組件傳來的值塞進子組件

而現在要來繼續完成刪除的功能，原本的 deleteService 是好的
所以我們會繼續使用它，要做的就是讓子組件可以呼叫這個方法
而原本我們刪除項目的方法是傳入 index 來判斷該刪除哪個位置的資料
所以這時候也要把 index 傳入子組件，像這樣

Massage.js

<MassageService
  key={index+massageService}
  massageService={massageService}
  index={index}
/>

這時候應該子組件就可以接收到名為 index 的參數
為了確認是否成功，在子組件加入一個 onClick 來判斷是否正確取得 index
當清單元素被點擊，就印出剛剛傳入的 index

MassageService.js

import React, { Component } from 'react';
class MassageService extends Component {
  render() {
    return (
      <li
        onClick={() => this.handleClick()}
      >
        {this.props.massageService}
      </li>
    );
  }

  handleClick() {
    console.log(this.props.index)
  }
}

export default MassageService;

如果沒發生錯誤，這時候整個功能搬移應該已經完成 87% 了
可以新增服務；可以識別不同清單內元素被點擊的事件
最後就用刪除功能替換掉 console.log 應該就完成了吧
來試試看

結果發現似乎不需要像我看的教學那樣麻煩，得 bind 一堆東西
然後調用 constructor 因為子類別的建構基於父類別
只有 super 可以調用父類別中的內容
如果使用 JSX 只要把方法和元素一樣傳進去就好，可以看系列文第七天
[DAY07] 介紹 State Hook

我們當然是用簡單的方法，把寫 code 的力氣省下來
傳入 deleteService 方法的部分
Massage.js

<MassageService
  key={index+massageService}
  massageService={massageService}  
  index={index}
  deleteService={this.deleteService}
/>

子組件中則是換掉剛剛 handleClick 中的內容
MassageService.js

handleClick() {
  this.props.deleteService(this.props.index)
}

於是整個組件搬移就完成了！
操作影片就不另外錄影，因為看起來跟沒有拆的時候一樣
難怪老闆都說會動就好

子組件和父組件之間的傳值是 React 中非常重要的一節
真的要實際去動手寫、去思考，照抄是沒有辦法體會其中的奧秘的