基於React實現TodoList簡單案例

實現TodoList案例步驟

1.創建 Todolist.js 組件並引入組件

// 引入react
import React from 'react';

// 引入子組件
import App from './App';
import Son from './Son';

// 聲明class類
export default class Person extends React.Component{
    
    constructor (props){
        super(props);
        this.state = {
            message :[] //初始化數組
        }
    }
    // 加載時執行
    UNSAFE_componentWillMount(){
        //從localStrong中獲取myList
        let myList = window.localStorage.getItem('myList');
        if(myList===null || myList===''){
            myList = [];//初始化myList數組
        }else{
            myList = myList.split(',');
        }
    
        this.setState({
            message:myList
        });
     }
    // 接收子組件的函數
    getDtate = (msg) =>{
      this.setState({message:msg})
    }
    // 刪除功能
    handleDeleteClick = (index,date) =>{
        
        let flag = window.confirm(`確定刪除${date}信息嗎`)
       //    ES6結構賦值
        const {message} = this.state
        if(flag){
            message.splice(index,1);
            this.setState(
                {message},//回調函數向本地存儲數據
                () => {window.localStorage.setItem('myList',message)})
        }    
     }
    // 更新功能
     handleUpdateClick = (index,date) =>{
        let flag = window.prompt(`確定修改${date}信息嗎`)
        //    ES6結構賦值
        const {message} = this.state
        if(flag !== null && flag !== ''){
            message.splice(index,1,flag);
            this.setState(
                {message},//回調函數向本地存儲數據
                () => {window.localStorage.setItem('myList',message)})  
        }  
     }
    
    // 渲染數據並傳送給子組件數據
    render(){
        //    ES6結構賦值
        const {message} = this.state
       return(
          <React.Fragment>
               <App getDate={this.getDtate}></App>
               <ul>
                   {
                       message.map((itme,index) =>(
                       <Son 
                            key = {index} 
                            message = {itme} 
                            index = {index} 
                            handleDeleteClick = {this.handleDeleteClick}
                            handleUpdateClick = {this.handleUpdateClick}
                       />
                       ))
                   }
               </ul>
          </React.Fragment>
       )
    }
        
}

　　

2.添加列表項功能

// 引入react
import React from 'react';

// 聲明class類
export default class App extends React.Component {
    // 構造方法
    constructor (props){
        super(props);
        this.state = {
            inputValue:'', //初始化輸入框
            message:[] //初始化數組
        }
    }
     //加載時執行
     UNSAFE_componentWillMount(){
        //從localStrong中獲取myList
        let myList = window.localStorage.getItem('myList');
        if(myList===null || myList===''){
            myList = [];//初始化myList數組
        }else{
            myList = myList.split(',');
        }
        this.setState({
            message:myList
        });
     }
    // 數據添加
    handleClick = () => {
   //    ES6結構賦值
       const {message,inputValue} = this.state
    // 判斷輸入框的值不能為空
       if(inputValue !== null && inputValue !== ''){
            message.unshift(inputValue)
            this.setState({message,inputValue:''},
            () => {window.localStorage.setItem('myList',message)})//回調函數向本地存儲數據
            this.props.getDate(message)  
       }else{
         alert(`輸入框不能為空`)
       }
    }
    // 監聽輸入框
    handleChange  = (e) => {
        const inputValue = e.target.value;
        this.setState({inputValue})    
    }
    render(){
        //    ES6結構賦值
        const {inputValue} = this.state
        return(
            <React.Fragment>
                <input type="text"
                    onChange = {this.handleChange}
                    value = {inputValue} 
                />
                <button onClick={this.handleClick}>添加</button>
            </React.Fragment>
        )
    }
   
}

　　

3.使用組件化實現刪除和修改功能

// 引入react
import React from 'react';

import './Son.css'

// 聲明class類
export default class Son extends React.Component {
    
    //構造方法
    constructor(props){
        super(props);
        this.state = {
            
        }
    }
    // 刪除點擊事件
    handleDeleteClick = (index,message) =>{
      this.props.handleDeleteClick(index,message)
    }
    // 更新點擊事件
    handleUpdateClick = (index,message) =>{
       this.props.handleUpdateClick(index,message)
    }
    // 渲染接收過來的數據
    render(){
      // ES6結構賦值
        const {message,index} = this.props
        return(
          <li>
              <p>{message}</p>
              <button onClick={() => {this.handleUpdateClick(index,message)}}>修改</button>
              <button onClick={() => {this.handleDeleteClick(index,message)}}>刪除</button>
          </li>
        )
    }
}

　　

4.使用CSS樣式修飾

li{
    list-style: none;
    display: flex;
}
p{
    color:chartreuse;
}