ToDolist简述

什么是ToDolist?

ToDoList是一款非常优秀的任务管理软件，用户可以用它方便地组织和安排计划.

1:ToDolist经典案例

用todolist可以实现增删改查的功能
下面是一个简单的案例
index.js代码
index.js为入口文件

import React from 'react'; //引入react模块
import ReactDOM from 'react-dom';
import App from './Todolist';//引入我们自己写的Todolist文件
ReactDOM.render(<App />, document.getElementById('root'));

Tdolist代码

import React from 'react';
class Tdlist extends React.Component{
    constructor(){
        super();
        this.state={
            num:[],展示的列表
        }
    }
    // 添加通过点击事件来进行添加
    btnclick(){
        this.setState({
        //运用扩展运算符展开取到的数据
            num:[...this.state.num,this.refs.inp.value],
            //this.refs.inp.value是通过this.refs属性获取到文本框的内容
        })
    }
    // 删除
    //splice() 方法用于添加或删除数组中的元素。并返回删除的元素
    handDele(index){
        var arry=[...this.state.num];
        arry.splice(index,1)
        this.setState({
          num:arry
        })
    }
    // 修改
    handChange(index){
        var arr=[...this.state.num];
        // 弹出一个提示框
        var rel=window.prompt('请输入要修改的内容：')
        //prompt()方法用于显示可提示用户进行输入的对话框。这个方法返回用户输入的字符串。
        // 对提示框内的内容进行判断，如果不为空，执行下面的代码
        if(rel !=null){
            arr.splice(index,1,rel);
            this.setState({
                num:arr
            })
        }
    }
    // 键盘事件(用于增加用户体验)
    keyDown(e){
        if(e.keyCode==13){
            this.btnclick()
        }
    }
    render(){
        return (
            <React.Fragment>
            //给DOM元素添加ref属性,可以通过this.refs获取到指定元素的内容
                <input type='text'ref='inp' onKeyDown={this.keyDown.bind(this)}></input>
                //给按钮添加一个点击事件，并将this绑定给这点击事件，否则this指向的是button这个元素
                <button onClick={this.btnclick.bind(this)}>提交</button>
                <ul>
                    {this.state.num.map((item,index)=>{
                     {/* item值 index下标 */}
                        return( <li key={index}>
                                    {item}&nbsp;&nbsp;
                                    <button onClick={this.handDele.bind(this,index)}>删除</button>&nbsp;&nbsp;
                                    <button onClick={this.handChange.bind(this,index)}>修改</button>
                               </li>)
                        })}
                </ul>
            </React.Fragment>
        )
    }
}
export default Tdlist;

具体效果
点击修改弹出框，在弹框上输入要修改的内容。
点击删除直接删除