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项,

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

我们先加个删除按钮

<li key={data.id}>{data.title} <button>删除</button></li>

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

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

.content {
> li {
list-style-type: none;
   margin-top: 10px;
 }
b
10faf
utton {
border: 1px solid #cccccc;
   border-radius: 4px;
   font-size: 12px;
   padding: 2px 10px;
   margin-left: 10px;
 }
}

看下浏览器界面

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

<button onClick={this.handleItemDel.bind(this, data.id)}>删除</button>

handleItemDel(id) {
console.log(id);
}

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

<button onClick={() => this.handleItemDel(data.id)}>删除</button>

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

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

下面我们来写删除事件!

handleItemDel(id) {
let list = this.state.list;
   list.splice(list.findIndex(data => data.id === id), 1);
   this.setState({list: list})
}

完整代码

import React from 'react';
import '../../public/css/shop.pcss'

class Index extends 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 (
<div className="content">
               {
list.map(data => <li key={data.id}>{data.title}
<button onClick={() => this.handleItemDel(data.id)}>删除</button>
                   </li>)
}
</div>
       );
   }
}

export default Index;

ok!

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

成功删除!

本文完 














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

感谢童鞋们支持!

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