React技巧5(TodoList实现)
本教程总共5篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章!
1.React 技巧1(状态组件与无状态组件的使用) ----2018.01.04
2.React 技巧2(避免无意义的父节点)----2018.01.05
3.React 技巧3(如何优雅的渲染一个List)----2018.01.06
4.React 技巧4(如何处理List里面的Item)----2018.01.07
5.React 技巧5(TodoList实现)----2018.01.08
开发环境:Windows 8,node v8.9.1,npm 5.5.1,WebStorm 2017.2.2
结合上面两节课,我们今天来写一个TodoList!
实现功能,添加,删除!
新建一个文件夹 demo
在改文件夹里新建两个组件
无状态组件 Index.jsx及状态组件TodoList.jsx
并再 Index.jsx 中引入 TodoList.jsx
Index.jsx
import React from 'react';
import TodoList from './TodoList';
const Index = () =>
<TodoList/>
;
export default Index;
TodoList.jsx
import React from 'react';
class TodoList extends React.Component {
constructor(props) {
super(props);
this.state = {};
}
componentDidMount() {
}
render() {
return (
<div>
这是TodoList
</div>
);
}
}
export default TodoList;
在 config -> entry -> entry.js
{
name: 'demo',
path: 'demo/Index.jsx',
title: '案例',
keywords: '案例,xxx',
description: '这是我们的案例'
}
然后执行
npm run devNew
npm run dev
下面我们写下 UI 界面
<div className="todoList">
<input type="text" ref="todoInput"/>
<button>添加</button>
<div className="list">
</div>
</div>
新建 app -> public -> css -> todoLIst.pcss
.todoList {
li {
list-style-type: none;
margin-top: 10px;
}
button {
border: 1px solid #cccccc;
border-radius: 4px;
font-size: 12px;
padding: 2px 10px;
margin-left: 10px;
}
}
现在我们开始写逻辑
我们在this.state 对象里加上 list
this.state = {
list: []
};
我们希望list数据结构是这样的
this.state = {
list: [
{
id:1,
title:'前端人人1',
status:1,/*0 删除,1 正常*/
},
{
id:2,
title:'前端人人2',
status:1,/*0 删除,1 正常*/
}
]
};那么我们 添加 事件 应该这样写:
handleAdd() {
let item = this.refs['todoInput'].value;
if (item) {
let list = this.state.list;
list.push({id: list.length + 1, title: item, status: 1});
this.setState({list: list}, () => console.log(this.state.list))
} else {
alert('不能为空')
}
}加到按钮上
<button onClick={this.handleAdd}>添加</button>这里没有绑定this
我们再构造函数里,绑定this,这是另一种绑定this 写法,
constructor(props) {
super(props);
this.state = {
list: []
};
this.handleAdd = this.handleAdd.bind(this)
}
我运行浏览器,看是否能打印出.list
不错,完美打印出来了
下面我们,渲染list
<div className="list">
{
list.map(data => <li key={data.id}>{data.title}</li>)
}
</div>
我们运行下浏览器,点击添加按钮
我们现在加上删除按钮
<button onClick={() => this.handleItemDel(data.id)}>删除</button>handleItemDel(id) {
let list = this.state.list;
list.find(data => data.id === id).status = 0;
this.setState({list: list})
}当点击删除按钮时,我们把改项的status置成0
我们修改一下渲染list的逻辑,让每个项的status为1的显示(删除的不显示)
<div className="list">
{
list.map(data => {
if (data.status === 1) {
return (
<li key={data.id}>{data.title}
<button onClick={() => this.handleItemDel(data.id)}>删除</button>
</li>
)
}else{
return false
}
})
}
</div>
这段代码其实还可以再优化一下,更加简洁:
<div className="list">
{
list.map(data => [
data.status === 1 ?
<li key={data.id}>{data.title}
<button onClick={() => this.handleItemDel(data.id)}>删除</button>
</li>
:
null
])
}
</div>
看下浏览器
我们刚刚把 前端人人3 删除,删除的就不显示了!
ok!大功告成!