Todolist 案例

refs写法：

// 引入react
import React from 'react';

// 创建一个Todolist类
class Todolist extends React.Component{
    // 构造方法
    constructor(){
        super()
        // 实例化一个值
        this.state={
            // 展示列表
            mass:[],
            // 调用input名称
            MyInput:''
        }
    }
    // 加载时执行
componentDidMount(){
    // 把数组保存到本地
    var Arry = window.localStorage.getItem('Arry')
    // if判断Arry 为哪一种空
    if(Arry==null || Arry==''){
        // 重新写个空数组
		Arry=[];
    }else{
        // 把字符串转为数组
        Arry = Arry.split(',')
    }
    // 设置一个新值
    this.setState({
        mass:Arry
    })
}

    // enter 键盘添加
    keyclick(e){
        if(e.keyCode==13){
            // 调用添加按钮事件
            this.btn()
        }
    }
    // 点击按钮添加
    btn(){
        // 用refs取到MyInput值
        var val = this.refs.MyInput.value;
        // console.log(val)
        // 在重新赋值  this.setState 有两个参数一个对象(object)和一个回调函数
        this.setState({
            // 这是对象
            mass:[...this.state.mass,this.refs.MyInput.value],
                // 回调函数
        },()=>{
            // 把数据保存到localStorage中
            window.localStorage.setItem('Arry',this.state.mass)
        })
        // 添加完输入框内容为空
        this.refs.MyInput.value=''
    }

    // 删除按钮
    btnsc(i){
        // 重新生命一个变量  把取到的数据  赋值给mass
        const mass=[...this.state.mass]
        // mass调用splice方法
         mass.splice(i,1)
        //重新设置值    this.setState 有两个参数一个对象(object)和一个回调函数
            this.setState({
             mass:mass
            //  回调函数
        },()=>{
             // 把数据保存到localStorage中
            window.localStorage.setItem('Arry',this.state.mass)
        })

    }

    //修改按钮
    btnxg(i){
        // 点击修改探出一个输入框 把输入框赋值给f
        var f = window.prompt('请输入新内容')
        // 判断f是否为空
        if(f != null){
            // 如果不为空mass调用splice方法() i是索引值  1是删除一个 f是修改后的值
            this.state.mass.splice(i,1,f)
             //重新设置值    this.setState 有两个参数一个对象(object)和一个回调函数
            this.setState({
                mass:this.state.mass
                  //  回调函数
            },()=>{
                 // 把数据保存到localStorage中
                window.localStorage.setItem('Arry',this.state.mass)
            })
        }
    }

    render(){
        return(
            <React.Fragment>
                {/* 输入框input */}
                <input type='text' ref='MyInput' onKeyDown={this.keyclick.bind(this)} />
                {/* 添加按钮 */}
                <button onClick={this.btn.bind(this)} >添加</button>
                <ul>
                    {/* 使用map循环 */}
                    {this.state.mass.map((m,i)=>{
                         return(
                             <li key={i} >
                                  {m} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                  {/* 修改按钮 */}
                                <button onClick={this.btnxg.bind(this,i)}>修改</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                  {/* 删除按钮 */}
                                <button onClick={this.btnsc.bind(this,i)}>删除</button>
                            </li>
                     )
                    })}
                </ul>
            </React.Fragment>
        )
    }
}
// 抛出Todolist
export default Todolist;

效果图：

这只是一个简单的Todolist 案例，分享给你们 ，有兴趣的可以优化一下，变的更完美 天使 光环