React__TodoList simple CRUD - local storage - Case

 

  1 import React, { Component } from 'react'
  2 
  3 export default class todolist extends Component {
  4     constructor(props) {
  5         super()
  6         this.state = {
  7             name: []
  9              }
 10         }
 12           //refs
 13     todoonclick = () => {
 14         if (this.refs.inputmy.value === '') {
 15             alert('請輸入')
 16         } else {
 17             let name = this.refs.inputmy.value
 18             this.setState({
 19                 name: [...this.state.name, name]
 20             },()=>{
 21                 window.localStorage.setItem('myList',this.state.name)
 22             })
 23         }
 24         this.refs.inputmy.value = '';
 25           }
 26     render() {
 27         return (
 28             <div>
 29                 {/* ref */}
 30                 <input type='text' onKeyDown={(e) => {
 31                     if (e.keyCode === 13) {
 32                         this.todoonclick()
 33                     }
 34                 }} ref='inputmy'></input>
 35                 <button onClick={this.todoonclick}>添加</button>
 36                 <div >
 37                     <ul >
 39                         {
 40                             this.state.name.map((item, index) => {
 41                                 return (
 43                                     <li className='todo_div' key={index}>{item}&nbsp;&nbsp;&nbsp;&nbsp;
 45                                       <div>
 46                                             {/* 修改事件 */}
 47                                             <Button the onClick = {() => {
 48                                                  //    to obtain original 
49                                                  the let yuanl = the this .state.name;
 50                                                  var propmt = window.prompt ( ' modification ' )
 51 is                                                  IF (! propmt = null ) {
 52 is                                                      / / delete the original first, into the new 
53 is                                                      yuanl.splice (index, . 1 , propmt)
 54 is                                                      the this .setState ({
 55                                                          mm: yuanl
56                                                          //   body storing the updated state data is updated to the localStrong 
57 is                                                      }, () => {
 58                                                          window.localStorage.setItem ( ' myList ' , the this .state.name)
 59                                                      })
 60                                                  }
 61 is                                              }}> Review </ Button>
 62 is                                          </ div>
 63 is  
64                                          <= {Button the onClick () => {
 65                                             this.state.name.splice(index, 1)
 66                                             this.setState({
 67                                                 name: this.state.name
 68                                             },()=>{
 69                                                 
 70               window.localStorage.setItem('myList',this.state.name)
 71                                             })
 72                                         }}>刪除</button>
 73                                     </li>)
 74                             }
 75                              )
 76                          }
 77                      </ UL>
 78                  </ div>
 80                      { the this .state.name.map ((Item, index) => <Li Key index = {}> {} Item 
 81                   </ Li> )}
 82                  </ UL> * / }
 83                 </ div>
 84              )}
 85  
86      // execute loading 
87      componentWillMount () {
 88  
89          // localStrong acquired myList
 90 
 91         var myList = window.localStorage.getItem('myList')
 92         if (myList == null || myList === '') {
 93             myList = [];
 94         } else {
 95             myList = myList.split(',')
 96         }
 97         this.setState({
 98             name: myList
 99         })
100 
101     }
102 }