React技巧4

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

上节课,我们渲染了一个List,这节课,我们来删除里面的Item项,

下节课我们会讲解,添加,删除!

我们先加个删除按钮

删除

我们顺便美化下界面,提前熟悉下postCss的一些写法

修改 app -> public -> css -> shop.pcss

.content{

>li{

list-style-type:none;

margin-top:10px;

}

button{

border:1px solid#cccccc;

border-radius:4px;

font-size:12px;

padding:2px10px;

margin-left:10px;

}

}

看下浏览器界面

接下来我们给按钮添加事件,绑定函数,并把id传参过去,点击删除看看能不能拿到参数id

删除

handleItemDel(id) {

console.log(id);

}

这里还有一种写法,不绑定this,直接写一个回调函数在里面

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

我们点击按钮,看能否大打印出当前id

我们点击了 前端人人5 打印出了它的id!

下面我们来写删除事件!

完整代码

ok!

浏览器运行,点击删除 前端人人5 试下

成功删除!

本文完

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

感谢童鞋们支持!

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