React技巧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

importReactfrom'react';

importTodoListfrom'./TodoList';

constIndex= () =>

;

export defaultIndex;

TodoList.jsx

importReactfrom'react';

classTodoListextendsReact.Component {

constructor(props) {

super(props);

this.state= {};

}

componentDidMount() {

}

render() {

return(

这是TodoList

);

}

}

export defaultTodoList;

在 config -> entry -> entry.js

{

name:'demo',

path:'demo/Index.jsx',

title:'案例',

keywords:'案例,xxx',

description:'这是我们的案例'

}

然后执行

npm run devNew

npm run dev

下面我们写下 UI 界面

添加

新建 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:2px10px;

margin-left:10px;

}

}

现在我们开始写逻辑

我们在this.state 对象里加上 list

this.state= {

list: []

};

我们希望list数据结构是这样的

那么我们 添加 事件 应该这样写:

加到按钮上

添加

这里没有绑定this

我们再构造函数里,绑定this,这是另一种绑定this 写法,

constructor(props) {

super(props);

this.state= {

list: []

};

this.handleAdd=this.handleAdd.bind(this)

}

我运行浏览器,看是否能打印出.list

不错,完美打印出来了

下面我们,渲染list

{

list.map(data =>)

}

我们运行下浏览器,点击添加按钮

我们现在加上删除按钮

this.handleItemDel(data.id)}>删除

当点击删除按钮时,我们把改项的status置成0

我们修改一下渲染list的逻辑,让每个项的status为1的显示(删除的不显示)

{

list.map(data => {

if(data.status===1) {

return(

this.handleItemDel(data.id)}>删除

)

}else{

return false

}

})

}

这段代码其实还可以再优化一下,更加简洁:

{

list.map(data => [

data.status===1?

this.handleItemDel(data.id)}>删除

:

null

])

}

看下浏览器

我们刚刚把 前端人人3 删除,删除的就不显示了!

ok!大功告成!

本文完

禁止擅自转载,如需转载请在公众号中留言联系我们!

感谢童鞋们支持!

如果你有什么问题,可以在下方留言给我们!