react实例之todo,做一个实时响应的列表操作在所有的mvc框架中,最常见的例子不是hello world,而是todo,由于reactjs的简单性,在不引用flux和redux的情况下,我们也一样可以做出很好的效果来。本文的例子在react中国首页中可以看到,它的源代码请点 ...
做一个实时响应的列表操作
在所有的mvc框架中,最常见的例子不是hello world,而是todo,由于reactjs的简单性,在不引用flux和redux的情况下,我们也一样可以做出很好的效果来。
本文的例子在react中国首页中可以看到,它的源代码请点击这里https://github.com/tianxiangbing/react-todo
首先我们看下截图的效果:
由上图,我们可以分析下它一共有哪些功能点:
- 有一个添加的文本框,下面有个实时显示输入结果的div层。(这里这样做的目的就是想说react实现mvvm也是相当简单的)
- 下面有一个列表显示添加的结果
- 每一个列表项有一个删除功能
- 每一项还有一个点击进入文本编辑,失去焦点自动保存的功能
大致就是上面的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> ); }
原标题:react实例之todo,做一个实时响应的列表操作
关键词:react
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。