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项,
下节课我们会讲解,添加,删除!
我们先加个删除按钮
我们顺便美化下界面,提前熟悉下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 =>
this.handleItemDel(data.id)}>删除
)
}
);
}
}
export default Index;
ok!
浏览器运行,点击删除 前端人人5 试下
成功删除!
本文完
禁止擅自转载,如需转载请在公众号中留言联系我们!
感谢童鞋们支持!
如果你有什么问题,可以在下方留言给我们!
