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

 

import React, { Component } from 'react'

export default class todolist extends Component {
    constructor(props) {
        super()
        this.state = {
            name: []
             }
        }
          //refs
    todoonclick = () => {
        if (this.refs.inputmy.value === '') {
            alert('請輸入')
        } else {
            let name = this.refs.inputmy.value
            this.setState({
                name: [...this.state.name, name]
            },()=>{
                window.localStorage.setItem('myList',this.state.name)
            })
        }
        this.refs.inputmy.value = '';
          }
    render() {
        return (
            <div>
                {/* ref */}
                <input type='text' onKeyDown={(e) => {
                    if (e.keyCode === 13) {
                        this.todoonclick()
                    }
                }} ref='inputmy'></input>
                <button onClick={this.todoonclick}>添加</button>
                <div >
                    <ul >
                        {
                            this.state.name.map((item, index) => {
                                return (
                                    <li className='todo_div' key={index}>{item}&nbsp;&nbsp;&nbsp;&nbsp;
                                      <div>
                                            {/* 修改事件 */}
                                            <button onClick={() => {
                                                //   先获取原来的
                                                let yuanl = this.state.name;
                                                var propmt = window.prompt('修改')
                                                if (propmt != null) {
                                                    //删除原来的第一个，把新的放入
                                                    yuanl.splice(index, 1, propmt)
                                                    this.setState({
                                                        mm: yuanl
                                                        //  本体存储  把更新后的state数据更新到localStrong中
                                                    }, () => {
                                                        window.localStorage.setItem('myList', this.state.name)
                                                    })
                                                }
                                            }}>修改</button>
                                        </div>

                                        <button onClick={() => {
                                            this.state.name.splice(index, 1)
                                            this.setState({
                                                name: this.state.name
                                            },()=>{
                                                
              window.localStorage.setItem('myList',this.state.name)
                                            })
                                        }}>刪除</button>
                                    </li>)
                            }
                            )
                        }
                    </ul>
                </div>
                    {this.state.name.map((item, index) => <li key={index}>{item} 
                 </li>)}
                </ul> */}
               </div>
            ) }

    //加載时执行
    componentWillMount() {

        //localStrong 中获取 myList

        var myList = window.localStorage.getItem('myList')
        if (myList == null || myList === '') {
            myList = [];
        } else {
            myList = myList.split(',')
        }
        this.setState({
            name: myList
        })

    }
}