基於React實現TodoList簡單案例

需求

1） 添加任務

2） 刪除任務

3） 更新任務狀態

4） 全選/全不選

5） 清除已完成的任務

組件的划分

• TodoList整體作為一個大組件；

• Header：input添加

• List：列表作為一個組件；

• Item: 列表中的每個列表項（ListItem）作為一個組件

• Footer：底部展示和功能作為一個組件

代碼編寫

App.js 父組件

import React, { Component } from 'react'

import Header from './components/Header'
import Footer from './components/Footer'
import List from './components/List'

import './App.css';

export default class App extends Component {
  state = {
    todoList: [
      { id: 1, name: "吃飯", done: true },
      { id: 2, name: "睡覺", done: true },
      { id: 3, name: "逛街", done: false },
      { id: 4, name: "上班", done: false }
    ]
  }
  // 添加todo
  addTodo = (todoObj) => { 
    const {todoList} = this.state;
    const newTodoList = [todoObj,...todoList]
    this.setState({
      todoList:newTodoList
    })
  }
  // 更新todo
  updataTodo = (id,done) => {
    const { todoList } = this.state;
    const newTodos = todoList.map((item) => {
      if (item.id === id) {
        return { ...item, done: done }
      } else {
        return item
      }
    })
    this.setState({ todoList: newTodos })
  }

  // 刪除
  delTodo = (id) => { 
    const { todoList } = this.state;
    const newTodos = todoList.filter( (item) => {
      return item.id !== id
    })
    this.setState({ todoList: newTodos })
  }

  // 全選/全不選
  allChecked = (done) => {
    const { todoList } = this.state;
    const newTodos = todoList.map((item) => { 
      return { ...item, done: done } 
    })
    this.setState({ todoList : newTodos })
  }
  // 清除所以已經完成的任務
  clearAllDone = () => {
    const { todoList } = this.state;
    const newTodos = todoList.filter((item) => { 
      return !item.done  
    })
    this.setState({ todoList : newTodos })
  }

  render() {
    const { todoList } = this.state
    return (
      <div className="todo-container">
        <div className="todo-wrap">
          <h2>todoList案例</h2>
          <Header addTodo={this.addTodo}/>
          <List todoList={todoList} updataTodo={this.updataTodo} delTodo={this.delTodo}/>
          <Footer todoList={todoList} allChecked={this.allChecked} clearAllDone={this.clearAllDone}/>
        </div>
      </div>
    )
  }
}

body {
  background: #fff;
}

.btn {
  display: inline-block;
  padding: 4px 12px;
  margin-bottom: 0;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  border-radius: 4px;
}

.btn-danger {
  color: #fff;
  background-color: #da4f49;
  border: 1px solid #bd362f;
}

.btn-danger:hover {
  color: #fff;
  background-color: #bd362f;
}

.btn:focus {
  outline: none;
}

.todo-container {
  width: 600px;
  margin: 0 auto;
}
.todo-container .todo-wrap {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
}

Header 組件

import React, { Component } from 'react'
import { nanoid } from 'nanoid' 
import './index.css'

export default class index extends Component {
    // 處理input enter事件
    handleKeyUp = (event) => {
        if(event.keyCode !== 13) return
        if(event.target.value.trim() === ''){
            alert("請輸入值")
            return
        }  
        const todoObj = {
            id:nanoid(),
            name:event.target.value,
            done:false
        }
        this.props.addTodo(todoObj);
        event.target.value = "";
    }
    render() {
        return (
            <div className="todo-header">
                <input type="text" placeholder="請輸入你的任務名稱，按回車鍵確認" onKeyUp={this.handleKeyUp}/>
            </div>
        )
    }
}

.todo-header input {
  width: 560px;
  height: 28px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 4px 7px;
}

.todo-header input:focus {
  outline: none;
  border-color: rgba(82, 168, 236, 0.8);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
}

List 組件

.todo-main {
    margin-left: 0px;
    border: 1px solid #ddd;
    border-radius: 2px;
    padding: 0px;
}

.todo-empty {
    height: 40px;
    line-height: 40px;
    border: 1px solid #ddd;
    border-radius: 2px;
    padding-left: 5px;
    margin-top: 10px;
}

import React, { Component } from 'react'

import Item from '../Item'
import './index.css'

export default class index extends Component {
    render() {
        const { todoList,updataTodo,delTodo } = this.props
        return (
            <ul className="todo-main">
                {
                    todoList.map( (todo) => {
                        return <Item {...todo} key={todo.id} updataTodo={updataTodo} delTodo={delTodo}/>
                    })
                } 
            </ul>
        )
    }
}

Item 組件

import React, { Component } from 'react'

import './index.css'

export default class index extends Component {
    // 處理鼠標的移入移出事件 
    state = {
        mouse:false
    }

    handleMouse = (mouse) => { 
        return ()=>{
            this.setState({
                mouse:mouse
            })
        }
    }
    // 更新todo狀態
    handleChecked = (id) => {
        return (event) => { 
            this.props.updataTodo(id,event.target.checked);
        }
    }
    handleDel = (id) => {
        return () => {
            this.props.delTodo(id);
        }
    }

    render() {
        const {name,id,done} = this.props
        const {mouse} = this.state
        return (
            <li onMouseLeave={this.handleMouse(false)} onMouseEnter={this.handleMouse(true)} style={{ background : mouse ? '#ddd' : 'white'}}>
                <label>
                    <input type="checkbox" checked={done} onChange={this.handleChecked(id)}/>
                    <span>{name}</span>
                </label>
                <button className="btn btn-danger" style={{display: mouse ? 'block' : 'none'}} onClick={this.handleDel(id)}>刪除</button>
            </li>
        )
    }
}

li {
    list-style: none;
    height: 36px;
    line-height: 36px;
    padding: 0 5px;
    border-bottom: 1px solid #ddd;
    
}

li label {
    float: left;
    cursor: pointer;
}

li label li input {
    vertical-align: middle;
    margin-right: 6px;
    position: relative;
    top: -1px;
}

li button {
    float: right;
    display: none;
    margin-top: 3px;
}

li:before {
    content: initial;
}

li:last-child {
    border-bottom: none;
}

Footer 組件

import React, { Component } from 'react'

import './index.css'

export default class index extends Component {

    // 全選/全不選 
    handleChange = (event) => { 
        this.props.allChecked(event.target.checked)
    }
    handleClick = () => {
        this.props.clearAllDone()
    }

    render() {
        const {todoList} = this.props;
        const doneCount = todoList.reduce((pre,todo)=> pre + (todo.done ? 1 : 0),0);
        const allCount = todoList.length;
        return (
            <div className="todo-footer">
                <label>
                    <input type="checkbox" onChange={this.handleChange} checked={ doneCount === allCount && allCount !== 0 ? true : false }/>
                </label>
                <span>
                    <span>已完成 {doneCount}</span> / 全部 {allCount}
                </span>
                <button className="btn btn-danger" onClick={this.handleClick}>清除已完成任務</button>
            </div>
        )
    }
}

.todo-footer {
    height: 40px;
    line-height: 40px;
    padding-left: 6px;
    margin-top: 5px;
}

.todo-footer label {
    display: inline-block;
    margin-right: 20px;
    cursor: pointer;
}

.todo-footer label input {
    position: relative;
    top: -1px;
    vertical-align: middle;
    margin-right: 5px;
}

.todo-footer button {
    float: right;
    margin-top: 5px;
}

案例總結

動態初始化列表，如何確定將數據放在哪個組件的state中？

• 某個組件使用：放在其自身的state中

• 某些組件使用：放在他們共同的父組件state中（狀態提升）

父子組件間如何通信

在父子組件中定義改變state數據的方法，將方法以props的形式傳遞給子組件，在子組件中觸發事件處理程序，然后滿足某種條件的話就執行父組件傳來的函數。

• 【父組件】給【子組件】傳遞數據：通過props傳遞

• 【子組件】給【父組件】傳遞數據：通過props傳遞，要求父提前給子傳遞一個函數

注意defaultChecked 和 checked的區別，類似的還有：defaultValue 和 value

defaultChecked 默認屬性 只在初始化數據的時候賦值

狀態在哪里，操作狀態的方法就在哪里