React技巧4(如何处理List里面的Item)

微信公众号 首发

本教程总共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

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

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

我们先加个删除按钮

{data.title}删除

我们顺便美化下界面,提前熟悉下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:2px 10px;

   margin-left:10px;

 }

}

看下浏览器界面

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

删除

handleItemDel(id) {

console.log(id);

}

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

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

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

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

下面我们来写删除事件!

handleItemDel(id) {

let list =this.state.list;

   list.splice(list.findIndex(data => data.id === id), 1);

   this.setState({list: list})

}

完整代码

import Reactfrom 'react';

import '../../public/css/shop.pcss'

class Indexextends React.Component {

constructor(props) {

super(props);

       this.state = {

list: [

{id:1, title:'前端人人1'},

               {id:2, title:'前端人人2'},

               {id:3, title:'前端人人3'},

               {id:4, title:'前端人人4'},

               {id:5, title:'前端人人5'},

               {id:6, title:'前端人人6'},

               {id:7, title:'前端人人7'},

               {id:8, title:'前端人人8'},

               {id:9, title:'前端人人9'}

]

};

   }

handleItemDel(id) {

let list =this.state.list;

       list.splice(list.findIndex(data => data.id === id), 1);

       this.setState({list: list})

}

render() {

let {list} =this.state;

       return (

               {

list.map(data =>

{data.title}

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

                   )

}

       );

   }

}

export default Index;

ok!

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

成功删除!

本文完

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

感谢童鞋们支持!

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