React技巧5(TodoList实现)
本教程总共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
结合上面两节课,我们今天来写一个TodoList!
实现功能,添加,删除!
新建一个文件夹 demo
在改文件夹里新建两个组件
无状态组件 Index.jsx及状态组件TodoList.jsx
并再 Index.jsx 中引入 TodoList.jsx
Index.jsx
import React from 'react';
import TodoList from './TodoList';
const Index = () =>
<TodoList/>
;
export default Index;
TodoList.jsx
import React from 'react';
class TodoList extends React.Component {
constructor(props) {
super(props);
this.state = {};
}
componentDidMount() {
}
render() {
return (
<div>
这是TodoList
</div>
);
}
}
export default TodoList;
在 config -> entry -> entry.js
{
name: 'demo',
path: 'demo/Index.jsx',
title: '案例',
keywords: '案例,xxx',
description: '这是我们的案例'
}
然后执行
npm run devNew
npm run dev
下面我们写下 UI 界面
<div className="todoList">
<input type="text" ref="todoInput"/>
<button>添加</button>
<div className="list">
</div>
</div>
新建 app -> public -> css -> todoLIst.pcss
.todoList {
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;
}
}
现在我们开始写逻辑
我们在this.state 对象里加上 list
this.state = {
list: []
};
我们希望list数据结构是这样的
this.state = {
list: [
{
id:1,
title:'前端人人1',
status:1,/*0 删除,1 正常*/
},
{
id:2,
title:'前端人人2',
status:1,/*0 删除,1 正常*/
}
]
};
那么我们 添加 事件 应该这样写:
handleAdd() {
let item = this.refs['todoInput'].value;
if (item) {
let list = this.state.list;
list.push({id: list.length + 1, title: item, status: 1});
this.setState({list: list}, () => console.log(this.state.list))
} else {
alert('不能为空')
}
}
加到按钮上
<button onClick={this.handleAdd}>添加</button>
这里没有绑定this
我们再构造函数里,绑定this,这是另一种绑定this 写法,
constructor(props) {
super(props);
this.state = {
list: []
};
this.handleAdd = this.handleAdd.bind(this)
}
我运行浏览器,看是否能打印出.list
不错,完美打印出来了
下面我们,渲染list
<div className="list">
{
list.map(data => <li key={data.id}>{data.title}</li>)
}
</div>
我们运行下浏览器,点击添加按钮
我们现在加上删除按钮
<button onClick={() => this.handleItemDel(data.id)}>删除</button>
handleItemDel(id) {
let list = this.state.list;
list.find(data => data.id === id).status = 0;
this.setState({list: list})
}
当点击删除按钮时,我们把改项的status置成0
我们修改一下渲染list的逻辑,让每个项的status为1的显示(删除的不显示)
<div className="list">
{
list.map(data => {
if (data.status === 1) {
return (
<li key={data.id}>{data.title}
<button onClick={() => this.handleItemDel(data.id)}>删除</button>
</li>
)
}else{
return false
}
})
}
</div>
这段代码其实还可以再优化一下,更加简洁:
<div className="list">
{
list.map(data => [
data.status === 1 ?
<li key={data.id}>{data.title}
<button onClick={() => this.handleItemDel(data.id)}>删除</button>
</li>
:
null
])
}
</div>
看下浏览器
我们刚刚把 前端人人3 删除,删除的就不显示了!
ok!大功告成!
- Spark高级操作之json复杂和嵌套数据结构的操作一
- hadoop系列之基础系列
- Spark的调度系统
- Spark Structured Streaming的高效处理-RunOnceTrigger
- Spark度量系统相关讲解
- Spark Structured Streaming高级特性
- Table API&SQL的基本概念及使用介绍
- 使用Linq to Sql 创建数据库和表
- Flink DataSet编程指南-demo演示及注意事项
- 解决 wcf HTTP 无法注册 另一应用程序正在使用 TCP 端口 80
- 构建Flink工程及demo演示
- F-Stack之kqueue封装为epoll介绍
- wcf http 返回图片
- F-Stack与Seastar对比
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法