react實現的一個待辦事項管理小程式

阿新 • • 發佈：2020-09-14

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>任務管理</title>
    <style>
    #root{
        width:  
100%;
        position: absolute;
        left: 0;
        top: 0;
    }
    </style>
</head>
<body>
    <div id="root"></div>
    <script src="https://cdn.bootcss.com/react/16.8.6/umd/react.development.js" crossorigin></script>
    <script src="https://cdn.bootcss.com/react-dom/16.8.6/umd/react-dom.development.js" crossorigin></script>
    <script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.js"></script>
    <script type="text/babel">
        /* 
 CSS start */
        const body = {
            width: '90%',
            marginLeft: '5%'
        };
        const left = {
            display: 'inline-block',
            width: '70%',
            textAlign: 'left',
            overflow: 'hidden',
            textOverflow: 'ellipsis',
            whiteSpace:  
'nowrap'
        };
        const right = {
            width: '30%',
            textAlign: 'right'
        };
        /* CSS end */
        let storage = globalThis.localStorage;
        if(!storage.getItem('id')){
            storage.setItem('id', '1');
            storage.setItem('c', '[]');
            storage.setItem('u', '[]');
        }
        let ID = parseInt(storage.getItem('id'));

        class AddUntreated extends React.Component{
            constructor(props){
                super(props);
                this.state = {
                    value: ''
                };
                this.add = this.add.bind(this);
                this._add = this._add.bind(this);
                this.valueChange = this.valueChange.bind(this);
            }
            shouldComponentUpdate(nextProps, nextState){
                if(this.props.addu == nextProps.addu && this.state.value == nextState.value){
                    return false;
                }
                return true;
            }
            add(){
                if(this.state.value == ''){
                    alert('請輸入待辦事項');
                    return void 0;
                }
                this.props.addu({
                    id: ID,
                    text: this.state.value
                });
                ++ID;
                storage.setItem('id', ID + '');
                this.setState({
                    value: ''
                });
            }
            _add(e){
                if(e.keyCode === 13){
                    this.add();
                }
            }
            valueChange(event){
                this.setState({
                    value: event.target.value
                });
            }
            render(){
                return (
                    <div style={body}>
                        <h3>新增待辦事項</h3>
                        <input type="text" onKeyUp={this._add} value={this.state.value} onChange={this.valueChange} />
                        <button onClick={this.add}>新增</button>
                    </div>
                );
            }
        }

        class Untreated extends React.Component {
            constructor(props){
                super(props);
                this.complete = this.complete.bind(this);
            }
            shouldComponentUpdate(nextProps, nextState){
                if(this.props.complete == nextProps.complete && this.props.list == nextProps.list){
                    return false;
                }
                return true;
            }
            complete(index){
                this.props.complete(index);
            }
            render(){
                return (
                    <div style={body}>
                        <h3>待辦事項列表</h3>
                        <ul>
                            {this.props.list.map(
                                (item, index) => {
                                    return (
                                        <li key={item.id} title={item.text}>
                                            <span style={left}>{item.text}</span>
                                            <span style={right}>
                                                <button onClick={this.complete.bind(this, index)}>完成</button>
                                            </span>
                                        </li>
                                    );
                                }
                            )}
                        </ul>
                    </div>
                );
            }
        }

        class Complete extends React.Component {
            constructor(props){
                super(props);
                this.deleteC = this.deleteC.bind(this);
            }
            shouldComponentUpdate(nextProps, nextState){
                if(this.props.deleteC == nextProps.deleteC && this.props.list == nextProps.list){
                    return false;
                }
                return true;
            }
            deleteC(index){
                this.props.deleteC(index);
            }
            render(){
                return (
                    <div style={body}>
                        <h3>已完成事項列表</h3>
                        <ul>
                            {this.props.list.map(
                                (item, index) => {
                                    return (
                                        <li key={item.id} title={item.text}>
                                            <span style={left}>{item.text}</span>
                                            <span style={right}>
                                                <button onClick={this.deleteC.bind(this, index)}>刪除</button>
                                            </span>
                                        </li>
                                    );
                                }
                            )}
                        </ul>
                    </div>
                );
            }
        }

        class Matter extends React.Component {
            constructor(props){
                super(props);
                this.state = {
                    uList: JSON.parse(storage.getItem('u')),  //待辦事項列表
                    cList: JSON.parse(storage.getItem('c'))  //已完成事項列表
                };
                this.empty = this.empty.bind(this);
                this.adduListItem = this.adduListItem.bind(this);
                this.complete = this.complete.bind(this);
                this.deleteC = this.deleteC.bind(this);
            }
            shouldComponentUpdate(nextProps, nextState){
                if(this.state.uList == nextState.uList && this.state.cList == nextState.cList){
                    return false;
                }
                return true;
            }
            empty(){  //清空
                ID = 1;
                this.setState({
                    uList: [],
                    cList: []
                });
                storage.setItem('id', '1');
                storage.setItem('c', '[]');
                storage.setItem('u', '[]');
            }
            adduListItem(item){  //新增事項加入待辦事項列表uList
                this.setState(function(state, props){
                    return {
                        uList: [...state.uList, item]
                    };
                }, function(){storage.setItem('u', JSON.stringify(this.state.uList));});
            }
            complete(index){  //把完成的這項事項從 待辦事項列表uList中刪除，加入已完成事項列表cList
                this.setState(function(state, props){
                    let tempC = [...state.cList, {id: state.uList[index].id, text: state.uList[index].text}],
                        tempU = [...state.uList];
                    tempU.splice(index, 1);
                    storage.setItem('c', JSON.stringify(tempC));
                    storage.setItem('u', JSON.stringify(tempU));
                    return {
                        cList: tempC,
                        uList: tempU
                    };
                });
            }
            deleteC(index){  //把刪除的這項事項從 已完成事項列表cList中移除
                this.setState(function(state, props){
                    let temp = [...state.cList];
                    temp.splice(index, 1);
                    storage.setItem('c', JSON.stringify(temp));
                    return {
                        cList: temp
                    };
                });
            }
            render(){
                return (
                    <React.Fragment>
                        <br /><br />
                        <div style={body}><button onClick={this.empty}>清空</button></div>
                        <AddUntreated addu={this.adduListItem} />
                        <Untreated list={this.state.uList} complete={this.complete} />
                        <Complete list={this.state.cList} deleteC={this.deleteC} />
                    </React.Fragment>
                );
            }
        }
        
        ReactDOM.render(
            <Matter />, 
            document.getElementById('root')
        );
    </script>
</body>
</html>

歡迎react使用經驗豐富的朋友為我指出程式的不足之處

react實現的一個待辦事項管理小程式

<!DOCTYPE html> <html lang=\"en\"> <head> <meta charset=\"UTF-8\"> <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">

java實現一個簡單的爬蟲小程式

前言前些天無意間在百度搜索了一下以前寫過的部落格我啥時候在這麼多不知名的網站上發表部落格了？？？點進去一看，內容一模一樣，作者卻不是我...

Java實現一個簡單的聊天小程式

服務端程式碼： package com.example.nettypractice.tcp; import java.io.IOException; import java.io.InputStream;

騰訊上線“騰訊待辦”微信小程式：可進行日程管理

8 月 7 日訊息感謝網友的熱心線索投遞，騰訊目前已經上線了“騰訊待辦”微信小程式，這是一款待辦事項和日程管理的效率工具。

java模擬實現鬥地主發牌小程式

一副撲克有54張牌：大小王+4*13，接下來我們來模擬一下鬥地主的發牌過程首先，我們需要買牌，新買來的牌都是按順序擺放的，因此下一步是洗牌，最後就是發牌了，不過發牌的時候要注意還要在最後留三張底牌。

C語言實現洗牌發牌小程式

本文例項為大家分享了C語言實現洗牌發牌小程式的具體程式碼，供大家參考，具體內容如下

python實現音樂播放和下載小程式功能

（本篇部分程式碼綜合整理自B站，B站有手把手說明的教程） 1.網易雲非付費內容爬取器（宣告：由於技術十分簡單，未到觸犯軟體使用規則的程度）驅動Edge瀏覽器（自己寫驅動會更高階）進入介面，爬取列表中第一個音訊地

Python使用檔案操作實現一個XX資訊管理系統的示例

寫在前面大家好，我是第一次python學了一個學期，期末要完成一個畢業生資訊管理系統大作業的小韓了，由於上次沒有仔細看開發實現的要求，實現了一個簡單的畢業生資訊管理系統，而這次專門整理了兩種使用檔案進行儲存

使用Python實現NBA球員資料查詢小程式功能

本文的文字及圖片來源於網路,僅供學習、交流使用,不具有任何商業用途,如有問題請及時聯絡我們以作處理。

一個簡單的計算器小程式

一個簡單的計算器小程式 package com.zjl.method; import java.util.Scanner; public class Demo07 {

小程式定時器_Processing小技巧：實現定時器以及紅綠燈小程式

技術標籤：小程式定時器在視覺化程式中有很多的效果是需要持續一段時間的，然後讓這種效果停止的。

Python實現自由爆率抽獎小程式

技術標籤：筆記 import random def write(x,y): while 1 : a_ = input (f"請輸入{x}星爆率(0-{y}，並且是整數):")

[js] 請使用js實現一個秒錶計時器的程式

技術標籤：歌謠---一步一步攻關前端面試題 [js] 請使用js實現一個秒錶計時器的程式

react實現一個數字框，文字框內只能輸入數字

完整程式碼 import React from \'react\'; import ReactDOM from \'react-dom\'; import \'antd/dist/antd.css\';

監聽redis的KEY失效作為一個觸發器來完成小程式的定時提醒功能

技術標籤：java 前言 1）：業務邏輯是這樣的>>小程式中有一個提醒功能，該功能有一個提醒時間，時間到了就給使用者傳送一個提醒，這裡的提醒採用的微信的訂閱訊息服務

手把手教你免費搭建一個功能強大的小程式商城

微信小程式近幾年可謂是不可錯過的一個時代風口，背靠微信10億使用者基數，小程式電商也日益蓬勃發展，不論是微信官方還是第三方開發者，都圍繞小程式做了很多事情，包括我們每天掃一掃的健康碼等都是用小程式做的，

基於 Gin + GORM + Casbin + Ant Design React 實現的RBAC許可權管理腳手架 gin-admin

https://studygolang.com/p/ginadmin 基於 Gin + GORM + Casbin + Ant Design React 實現的RBAC許可權管理腳手架，目的是提供一套輕量的中後臺開發框架，方便、快速的完成業務需求的開發。

計算機畢業設計-物業管理小程式-基於ssm的小區物業維修管理系統微信小程式程式碼-小程式社群物業繳費管理系統

注意：該專案只展示部分功能，如需瞭解，評論區諮詢即可。 1.開發環境開發語言：Java

計算機畢業設計-圖書借閱小程式-圖書館借閱管理小程式程式碼-校園圖書館借書還書小程式

注意：該專案只展示部分功能，如需瞭解，評論區諮詢即可。 1.開發環境開發語言：Java

使用vue3實現一個人喵交流小程式

目錄前言初始化專案設計程式碼實現按需載入播放音訊錄音長按事件執行除錯總結前言

react實現的一個待辦事項管理小程式

相關推薦