React.js + axios 介紹與實作(下)

延續上個章節，實作DELETE & PUT

📝 回顧上個章節：React.js + axios 介紹與實作(上)
目前使用者可以查看以及輸入新資料。
這章節將延續上個章節，增添擴充功能！

📋 目錄

1. [實作]加上刪除功能
2. [實作]加上編輯功能
3. React + axios 系列小結

[實作]加上刪除功能

step1 新增資料刪除按鈕

React Icon 可以參考 https://react-icons.github.io/react-icons

於終端機輸入指令安裝套件

npm install react-icons --save

找尋到適合的icon

在 App.js 上方 import 要用到的icon

import {FaTrashAlt} from 'react-icons/fa'

加上對應的Delete欄位

此時畫面多出一排垃圾桶

step2 呼叫API

為了用Axios進行Delete請求，使用.delete()方法。第二個參數傳入id。

App.js 表格垃圾桶部分加上 onClick 觸發

<td onClick={() => deleteEmployee(employee.id)}><FaTrashAlt/></td>

新增 deleteEmployee function 如下：

非完整App.js檔案

原本沒有刪除功能，id 直接取資料長度 +1 做設定 📃
加上刪除功能，資料的長度不再是固定累加。id 作為資料識別的關鍵 key，不能重複！所以修改新增 employee 時，id取資料改成最後一筆的id數字＋1

id: employees[employees.length-1].id+1

[實作]加上編輯功能

有了刪除功能，最後還差編輯功能 ✏️

step1 新增資料編輯按鈕

在 App.js 上方 import 要用到的icon

import {FaEdit} from 'react-icons/fa'

加上對應的Edit欄位

此時畫面多出一排編輯按鈕

step2 新增 Modal撰寫 Modal(Dialog) 內容

Modal 使用react-bootstrap，安裝react-bootstrap

npm install react-bootstrap

React-bootstrap的使用方式跟bootstrap的概念一樣，不同的是這個套件將bootstrap包成了component，使用時加載component。

在 App.js 上方 import Modal

import Modal from 'react-bootstrap/Modal'

編輯視窗上要代出 employee 的資料，還有控制 modal的關閉，程式碼加上：

非完整App.js檔案

編輯的btn，改成：

<td onClick={() => handleShow(employee.id, employee.name, employee.phone, employee.profession)}><FaEdit/></td>

傳入 id, name, phone, profession資訊。

非完整App.js檔案

新增 Modal，代出點擊編輯按鈕的該筆資訊。

非完整App.js檔案

撰寫 handleEditSubmit function，如下：

非完整App.js檔案

完成全部的撰寫，此時瀏覽器的畫面操作如下：

功能也齊全了🎉

React + axios 系列小結

先認識 axios 並下載好預先準備的檔案，經由一步步實作，熟悉 React 搭配 axios 介接 API。此系列文章完整涵蓋 get, post, delete, put 增刪查改方法。實作小專案，若想再更優化，可以加上表單驗證功能。

最後，附上此練習的 GitHub 檔案連結 🔗 ，專案資料夾名稱：react-axios-practice-employees 。