React__TodoList 简单增删改查—本地存储-案例

Posted 2021-03-20 jiazhaolong

 

  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 onClick={() => {
 48                                                 //   先获取原来的
 49                                                 let yuanl = this.state.name;
 50                                                 var propmt = window.prompt(‘修改‘)
 51                                                 if (propmt != null) {
 52                                                     //删除原来的第一个，把新的放入
 53                                                     yuanl.splice(index, 1, propmt)
 54                                                     this.setState({
 55                                                         mm: yuanl
 56                                                         //  本体存储  把更新后的state数据更新到localStrong中
 57                                                     }, () => {
 58                                                         window.localStorage.setItem(‘myList‘, this.state.name)
 59                                                     })
 60                                                 }
 61                                             }}>修改</button>
 62                                         </div>
 63 
 64                                         <button 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                     {this.state.name.map((item, index) => <li key={index}>{item} 
 81                  </li>)}
 82                 </ul> */}
 83                </div>
 84             ) }
 85 
 86     //加載时执行
 87     componentWillMount() {
 88 
 89         //localStrong 中获取 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 }