本教程总共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; } button { 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 试下
成功删除!
本文完
禁止擅自转载,如需转载请在公众号中留言联系我们!
感谢童鞋们支持!
如果你有什么问题,可以在下方留言给我们!