React_TODOList 數據增刪改查

①、功能代碼實現：

1. 添加數據
2. 查詢數據，展示
3. 刪除數據
4. 修改數據

②、數據持久化操作

localStorage.setItem('key',value)

var value = localStorage.getItem('key')

③、修改state屬性

this.setState(obj,回調函數)，修改state屬性的函數

• 參數1是要更新的數據對象，
• 參數2是回調函數，參數2的主要作用是，用於展示更新后的state數據

setState()方法是異步方法
如果在setState()函數外保存數據，有可能保存不了，因為保存時數據還沒更新

1、先獲取本地儲存數據

//構造方法
    constructor() {
        super()
        this.state = {
            myList: [] //展示列表
        }
    }

    //加載時執行
    UNSAFE_componentWillMount() {
        //從localStrong中獲取myList
        var myList = localStorage.getItem('myList')
        if (myList === null || myList === '') {
            myList = []//初始化myList數組
        } else {
            //把字符串轉數組
            myList = myList.split(',')
        }
        //設置狀態值
        this.setState({
            myList: myList
        })
    }
    //封裝本地儲存，以便重復使用
    onState() {
        this.setState({
            myList: this.state.myList
        }, () => {
            //把更新后的state數據更新到localStrong中
            localStorage.myList = this.state.myList
        })
    }

2、添加數據

　　　　　　{/* 文本框   綁定onKeyDown鍵盤事件 */}
          <input className="inp" ref="myInput" type="text" onKeyDown={this.onKeyDown.bind(this)} />
          {/* 添加按鈕   綁定onMyList添加方法 */}
          <button className='btn' onClick={this.onMyList.bind(this)}>添加</button>

//按鈕點擊事件方法，添加方法
    onMyList() {
        var val = this.refs.myInput.value
        //在內存中添加
        this.setState({
            //...為展開運算符，將this.state.list內容放到當前的list中
            myList: [...this.state.myList, val]
        }, () => {
            //把更新后的state數據更新到localStrong中
            localStorage.myList = this.state.myList
            this.refs.myInput.value = ''//點擊添加按鈕，清空輸入框
        })
    }

　　渲染頁面

{
                    <ul className='ul'>
                        {/* map循環 */}
                        {this.state.myList.map((m, i) => {
                            return <li key={i}>
                                {/* m，每個值 */}
                                {m}
                            </li>
                        })}
                    </ul>
                }

　　綁定鍵盤事件

//鍵盤事件，回車添加
    onKeyDown(e) {
        if (e.keyCode === 13) {
            //調用本地儲存方法
            this.onMyList()
        }
    }

效果：

3、刪除數據

{/* 刪除按鈕  綁定onDelete刪除方法 */}
<button onClick={this.onDelete.bind(this, i)}>刪除</button>

    //點擊展示列表事件方法，用於刪除展示元素
    onDelete(i) {
        this.state.myList.splice(i, 1)
        var ok = window.confirm('確認刪除嗎？')
        if (ok) {
            //調用本地儲存方法
            this.onState()
        }
    }

效果:

這里考慮到動圖大小沒錄彈框

4、修改數據

{/* 修改按鈕  綁定onUpdate修改方法 */}
 <button onClick={this.onUpdate.bind(this, i)}>修改</button>

    //修改方法
    onUpdate(i) {
        //彈出輸入框，用於填寫新內容
        var str = prompt('請輸入修改內容：')
        if (str != null) {
            //二次確認
            var ok = window.confirm('確認修改嗎？')
            if (ok) {
                this.state.myList.splice(i, 1, str)
                //調用本地儲存方法
                this.onState()
            }
        }
    }

效果：

5、清空數據

在這里我又加了一個清空的，非常簡單

 {/* 清空按鈕   綁定onClear清空方法 */}
  <button className='btn' onClick={this.onClear.bind(this)}>清空</button>

//點擊清空本地儲存
    onClear() {
        this.setState({
            myList: []
        }, () => {
            //把更新后的state數據更新到localStrong中
            localStorage.myList = this.state.myList
        })
    }

效果：

好啦，本期教學到此結束，有哪里不好的歡迎提出，謝謝~~ bay~~