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代碼寫完

 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