todolistのCRUD

主な機能　　

　　　　増加したデータ

　　　　データを削除

　　　　修正データ

　　　　ページのレンダリングデータを検索します

1.作成  Todolist.js コンポーネントとコンポーネントの導入

//導入REACT 
リアクトからインポート「をREACT」; 
 
//サブアセンブリに組み込ま
アプリ「./App 'からインポート; 
息子./Son」からインポート; 
 
//クラス宣言クラス
エクスポート{React.Componentは、人クラスのデフォルト延び
     
    （コンストラクタ小道具）{ 
        スーパー（小道具）; 
        this.state = { 
            メッセージ：[] //初期化アレイ
        } 
    } 
    が実行//負荷
    UNSAFE_componentWillMount（）{ 
        //ます。myListからlocalStrongを取得し
        ます。myList = window.localStorage.getItemを聞かせて（「ます。myList '）; 
        IF（ます。myListます。myList === === NULL ||' '）{ 
            ます。myList = []; //初期化配列ます。myList 
        }他{ 
            ます。myList myList.split =（'「）。
        }
     
        this.setState（{ 
            メッセージ：ます。myList 
        }）; 
     } 
    関数//受信サブアセンブリ
    getDtate =（MSG）=> { 
      this.setState（{メッセージ：MSG}）
    } 
    //削除機能
    handleDeleteClick =（インデックス、日付）= > { 
         
        旗でのlet window.confirm =（ `必ず削除情報にあなた$ {日付}`）
       // ES6構造割り当てのため
        のconst {}メッセージthis.state = 
        IF（のフラグ）{ 
            message.splice（インデックス,. 1）; 
            this.setState （
                {メッセージ} //コールバックデータをローカルストレージに
                （）=> {window.localStorage.setItem（ 'ます。myList'、メッセージ）}）
        }    
     }  
    //更新機能
     handleUpdateClick =（インデックス、DATE）=> { 
        内のフラグにwindow.prompt LET =（ `修飾情報を決定行う$ {日付}`）
        //ためES6構造割り当て
        CONST} {メッセージthis.state = 
        IF（のフラグ！== NULL &&のフラグ！== ''）{ 
            message.splice（インデックス,. 1のフラグ）; 
            this.setState（
                {メッセージ} //コールバックデータをローカルストレージに
                （）=> {window.localStorage.setItem（ 'ます。myList'、メッセージ）}）
        } 
     } 
     
    //データをレンダリングし、サブアセンブリにデータを送信する
    レンダリング（）{ 
        // ES6構造割り当て
        CONST} {メッセージ= this.state 
       リターン（
          <React.Fragment> 
               <this.getDtateアプリのgetDate = {}> < /アプリケーション>
               <UL>
                   {  
                       message.map（（ITMEを、指数）=>（
                       <ソン・
                            キー= {索引} 
                            メッセージ= {ITME} 
                            指数= {索引} 
                            handleDeleteClick = {this.handleDeleteClick} 
                            handleUpdateClick = {this.handleUpdateClick} 
                       /> 
                       ））
                   } 
               </ UL> 
          </React.Fragment> 
       ）
    } 
         
}

リスト項目の機能を追加します。2.

//導入REACT 
; 'REACT'リアクトからインポート
 
//クラス宣言クラス
エクスポートデフォルトクラスは、App {延びReact.Component 
    //コンストラクタの
    コンストラクタ（小道具）{ 
        スーパー（小道具）; 
        this.state = { 
            inputValueでのために： ''、/ /初期入力ボックス
            メッセージ：[] //初期化アレイ
        } 
    } 
     が実行//負荷
     UNSAFE_componentWillMount（）{ 
        //からlocalStrongます。myListを取得
        させます。myList = window.localStorage.getItem（ 'ます。myList'）; 
        （IFます。myList === === ||ます。myList NULL ''）{ 
            ます。myList = []; //初期化配列ます。myList 
        }他{ 
            ます。myList myList.split =（ ''）; 
        } 
        この。SETSTATE（{
            メッセージ：ます。myList 
        }）; 
     } 
    //データが追加
    （= handleClickを）=> { 
   // ES6構造割り当て
       CONST {メッセージ、のinputValue this.state =} 
    //決意値入力ボックスは空にできません
       （inputValueで== nullの場合！ == inputValueで&& ''）{！ため
            message.unshift（inputValueで用）
            this.setState（{メッセージ、inputValueでのために： ''}、 
            （）=> {window.localStorage.setItem（ 'ます。myList'、メッセージ）}）//コールバックローカルストレージに機能データ
            this.props.getDate（メッセージ）
       }他{ 
         アラート（入力ボックスは空にすることはできません''）
       } 
    } 
    //リスナー入力ボックス
    handleChange =（E）=> { 
        CONST = e.target.value inputValueでのために、
        this.setState（{inputValueで}）    
    } 
    （レンダリング）{ 
        // ES6结构赋值
        CONST {inputValueでは} = this.state 
        リターン（
            <React.Fragment> 
                の<input type = "text" 
                    のonChange = {this.handleChange} 
                    値= { inputValueで} 
                /> 
                <ボタンのonClick = {this.handleClick}>添加</ボタン> 
            </React.Fragment> 
        ）
    } 
    
}

　　

削除や変更の機能を実現するためのコンポーネントの3.

//導入REACT 
;リアクト「REACT」からインポートを
 
インポート」./Son.css' 
 
//クラス宣言クラス
React.Componentソンデフォルトクラスを拡張{エクスポート
     
    //コンストラクタの
    コンストラクタ（小道具）{ 
        スーパー（小道具）; 
        this.state = { 
             
        } 
    } 
    //削除クリックイベント
    handleDeleteClick =（指数、メッセージ）=> { 
      this.props.handleDeleteClick（インデックス、メッセージ）
    } 
    //更新クリックイベント
    handleUpdateClick =（指数、メッセージ）=> { 
       this.props.handleUpdateClick （索引、メッセージ）
    } 
    //データを介して受信レンダリング
    レンダリング（）{ 
      // ES6構造割り当て
        CONST {メッセージインデックス} = this.propsを 
        リターン（
          <LI>
              <P> {メッセージ} </ P> 
              <ボタンのonClick = {（）=> {this.handleUpdateClick（インデックス、メッセージ）}}>修改</ボタン> 
              <ボタンのonClick = {（）=> {this.handleDeleteClick（インデックスメッセージ）}}>删除</ボタン> 
          </ LI> 
        ）
    } 
}

　　

4. CSSスタイルの変更

李{ 
    リストスタイル：なし。
    表示：フレックス。
} 
、P { 
    色：シャルトリューズ。
}