react实例之todo,做一个实时响应的列表操作

react实例之todo，

做一个实时响应的列表操作

在所有的mvc框架中，最常见的例子不是hello world，而是todo，由于reactjs的简单性，在不引用flux和redux的情况下，我们也一样可以做出很好的效果来。

本文的例子在react中国首页中可以看到，它的源代码请点击这里https://github.com/tianxiangbing/react-todo

首先我们看下截图的效果：

由上图，我们可以分析下它一共有哪些功能点：

1. 有一个添加的文本框，下面有个实时显示输入结果的div层。(这里这样做的目的就是想说react实现mvvm也是相当简单的)
2. 下面有一个列表显示添加的结果
3. 每一个列表项有一个删除功能
4. 每一项还有一个点击进入文本编辑，失去焦点自动保存的功能

　　大致就是上面的4个功能点了，与react官方的todo例子略有不同，还有点不同的是我使用的是es6语法编写，为什么要这样，这是趋势，所以在我做的react中国这个网站里的例子也大多使用es6语法写jsx文件。

　　下面就是具体的写代码的时间了，首先我们先把界面排出来，html代码写完

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

render(){    return (      <div>        <div><input type="text" value={this.state.title} onKeyDown={(e)=>{e.keyCode==13?this.addHandle(e):undefined}} placeholder="请输入标题" onChange={this.changeHandle.bind(this)}/><button onClick={this.addHandle.bind(this)}>添加</button></div>        <div className="preview">{this.state.title}</div>        <div className="list">          {            this.state.list.map((item,index)=>{              return (                  <a key={index}>                    {item.edit?<input type="text" onKeyDown={(e)=>{e.keyCode==13?this.toEdit(item):undefined}} onBlur={this.blurHandle.bind(this,item)} onChange={this.changeItem.bind(this,item)} value={item.title}/>:<span onClick={this.toEdit.bind(this,item)}>{item.title}</span>}                    <button onClick={this.delHandle.bind(this,index)}>删除</button>                  </a>                )            })          }        </div>      </div>    );  }

　　从这里，我们大致可以看出来，所有的动态改变都是通过state的，我们只需要绑定state到html里，你在其他地方state的变化就会反应在Html里了，这一块就类似于ng的mvvm了，但react的state需要用 this.setState({}) 的方式触发， 这个不是局限性，而统一了入口管理，我觉得它比ng的直接属性触发或者emberjs的所有对象都有set和get方法要更优，简单之美嘛。

　　然后就是填充上面的几个事件了：

 addHandle(e){
    let list = this.state.list;
    list = list.concat([{title:this.state.title}]);
    this.setState({list:list,title:''});
  }
  changeHandle(e){
    this.setState({title:e.target.value});
  }
  delHandle(index){
    console.log(index)
    let list = this.state.list;
    list.splice(index,1);
    this.setState();
  }
  changeItem(item,e){
    item.title = e.target.value;
    this.setState();
  }
  blurHandle(item){
    item.edit = !item.edit;
    this.setState();
  }
  toEdit(item){
    item.edit=!item.edit;
    console.log(this.refs.txtedit)
    this.setState();
  }

　　这里的每个方法都简单到爆炸，都只是对state里的某一个项做了修改，由数据来驱动显示，这不就是框架的优点吗？最后，我们还要记得给state一个初始值：

 constructor(props){
    super(props);
    this.state={list:[{title:"点我进入编辑模式"}],title:''};
  }

　　好了，整个reactjs的todo例子就这样完成了，是不是很easy？如果你还有点看不太懂的话，那可能是你的代码的顺序不对，请从下往上再看一遍就好了，谢谢！

参考资料：react中国 、emberjs、todo