iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 17
0
Modern Web

被 React react 的後端工程師系列 第 17

[DAY17] 組件傳值之我想搞點事

我想說的是
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 中非常重要的一節
真的要實際去動手寫、去思考,照抄是沒有辦法體會其中的奧秘的


上一篇
[DAY16] 組件的傳值之爸爸給你的你才能要
下一篇
[DAY18] Developer tools 與 Snippets 之老師我也想當金手指之 debug guy
系列文
被 React react 的後端工程師30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言