Skip to content

1.當使用者點擊icon 時,觸發 onClick 綁定的事件處理函數onDelete 2.事件綁定TodoItem 中的 button  3.通過props將事件處理函數由父層傳遞給子層元件,將todo.id資料傳遞回onDelete進行處理 4.根據state的變化,React 檢測通過 setTodos 更新todos 的值,就重新渲染畫面

Notifications You must be signed in to change notification settings

S4chan/todoList

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

9 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Todo List X MVC with React

CRUD 功能完整的 Todo-List

Preview

TodoList Preview

環境需求

為確保專案能正常運行,請確認系統環境符合以下要求:

  • Node.js : 版本 >= 14.x (推薦使用 18.x 以上版本)
  • npm : 版本 >= 6.x (推薦 8.x 以上)
  • 作業系統 : Windows、macOS 或 Linux
  • 瀏覽器 : 支援最新的 Chrome、Firefox 或 Safari

套件需求

本專案使用以下主要套件:

  • React : ^18.2.0
  • React-Router-Dom : ^6.4.1
  • Styled-Components : ^5.3.5
  • Sass : ^1.56.2
  • Webpack : ^4.44.2

更多詳細的依賴請參考 package.json

安裝與使用

1. Clone 專案

git clone https://github.com/S4chan/todoList.git
cd todoList

2. 安裝所需套件

請確保已安裝 Node.js 和 npm,再執行以下指令:

$ npm install

3. 啟動專案

$ npm start

About

1.當使用者點擊icon 時,觸發 onClick 綁定的事件處理函數onDelete 2.事件綁定TodoItem 中的 button  3.通過props將事件處理函數由父層傳遞給子層元件,將todo.id資料傳遞回onDelete進行處理 4.根據state的變化,React 檢測通過 setTodos 更新todos 的值,就重新渲染畫面

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 3

  •  
  •  
  •