小案例：React中TodoList案例（实现增删查改）

实现增删查改

index.html代码：

<div id="root"></div>  //用于接收组件传来的内容

index.js代码：

import React from 'react';  //引入React模块
import ReactDOM from 'react-dom';  //引入react-dom模块
import TodoList from './TodoList'  //TodoList.js组件
ReactDOM.render(<TodoList />, document.getElementById('root'));  // 调用TodoList组件

TodoList.js代码：

//引入React模块
import React from 'react';  
//创建TodoList组件
class TodoList extends React.Component {

	//构造方法
    constructor() {
        super();
        //设置静态属性
        this.state = {
            myList: [],  //添加展示在页面的数据组成的数组
            inputValue: ''  //输入框中的值
        }
    }

    // 加载时执行的方法
    componentWillMount() {
    	//将页面内容实时保存在浏览器中，永久保存
        var list = window.localStorage.getItem('list');
        //list值为如果空就转为空数组，如果有值就用数组中的split()方法分割成字符串
        if (list == null || list == '') {
            list = [];
        } else {
            list = list.split(',');
        }
        //将页面内容设为浏览器保存的内容
        this.setState({
            myList: list
        });
    }

    // 添加按钮绑定点击事件
    handleClick() {
        this.setState({
        	//将页面值设置为原来页面所有的值（this.state.myList），加上输入框中的值（this.state.inputValue），即为添加输入框中的值
            myList: [...this.state.myList, this.state.inputValue],  //...this.state.myList扩展运算符展开所有页面的数据
            //添加过后重新将输入框变成空值
            inputValue: ''
   	//实时更新在浏览器中，永久保存在浏览器中
        }, () => {
            window.localStorage.setItem('list', this.state.myList);
        });
    }
    
    //获取输入框输入值的事件
    handleInputChange(e) {
    	//根据onChange（）事件实时将输入框中的值赋给inputValue
        this.setState({
            inputValue: e.target.value
        });
    }

    // 删除按钮事件
    handleItemClick(index) {
    	//将页面信息赋给myList常量
        const myList = [...this.state.myList];
        //用数组中的splice（）方法删除下标从index开始的1个数据
        myList.splice(index, 1);
        //将删除过数据的数组重新赋给myList
        this.setState({
            myList: myList
        }, () => {
        //将删除过数据的数组实时更新到浏览器中，永久保存
            window.localStorage.setItem('list', this.state.myList);
        });
    }

    // 修改按钮事件
    handleUpdate(index) {
    	//点击修改按钮弹出window下的prompt()输入确认框，并将值赋给rel
        var rel = window.prompt('请输入内容：');
        if (rel !== null) {
        	//将下标为index的数据用splice()方法改为rel，即为弹出框中输入的内容
            this.state.myList.splice(index, 1, rel);
            //将修改过的数据重新赋给myList
            this.setState({
                myList: this.state.myList
            }, () => {
            //将修改过数据的内容实时更新在浏览器中，永久保存
                window.localStorage.setItem('list', this.state.myList);
            });
        }

    }

    // 给输入框绑定键盘事件
    keyDown(e) {
    	//如果按下回车，就执行handleClick()方法，即添加数据
        if (e.keyCode == 13) {
            this.handleClick();
        }
    }

    render() {
        return (
            <React.Fragment>
            	{/* 展示在页面中的内容给他们绑定以上事件 */}
                <input type="text" value={this.state.inputValue} onChange={this.handleInputChange.bind(this)} onKeyDown={this.keyDown.bind(this)}></input>
                <button onClick={this.handleClick.bind(this)}>添加</button>
                <ul>
                {/* 用map()方法给每个数据后添加上修改和删除按钮 */}
                    {this.state.myList.map((item, index) => {
                        return <li key={index}>
                            {item}&nbsp;&nbsp;
                            {/* 在按钮上绑定增删查改的方法 */}
                            <button onClick={this.handleUpdate.bind(this, index)}>修改</button>&nbsp;&nbsp;
                            <button onClick={this.handleItemClick.bind(this, index)}>删除</button>
                        </li>

                    })}
                </ul>
            </React.Fragment>
        );
    }
}
//将TodoList组件抛出
export default TodoList;