Node.js + React + MongoDB 实现 TodoList 单页应用
1 import React, { Component, PropTypes } from 'react'2 import ReactDOM from 'react-dom'
3 import $ from 'jquery'
4 import TodoList from './comps/todo-list'
5
6>
7
8 constructor(props) {
9 super(props);
10 this.state = {
11 todoList: [],
12 showTooltip: false// 控制 tooltip 的显示隐藏
13 }
14 }
15
16 componentDidMount () {
17 // 获取所有的 todolist
18 this._getTodoList();
19 }
20
21 // 获取 todolist
22 _getTodoList () {
23 const that = this;
24 $.ajax({
25 url: '/getAllItems',
26 type: 'get',
27 dataType: 'json',
28 success: data => {
29 const todoList = that.todoSort(data)
30 that.setState({
31 todoList
32 });
33 },
34 error: err => {
35 console.log(err);
36 }
37 });
38 }
39
40 // 添加 todo
41 _onNewItem (newItem) {
42 const that = this;
43 $.ajax({
44 url: '/addItem',
45 type: 'post',
46 dataType: 'json',
47 data: newItem,
48 success: data => {
49 const todoList = that.todoSort(data);
50 that.setState({
51 todoList
52 });
53 },
54 error: err => {
55 console.log(err);
56 }
57 })
58 }
59
60 // 删除 todo
61 _onDeleteItem (date) {
62 const that = this;
63 const postData = {
64 date: date
65 };
66 $.ajax({
67 url: '/deleteItem',
68 type: 'post',
69 dataType: 'json',
70 data: postData,
71 success: data => {
72 this._getTodoList();
73 },
74 error: err => {
75 console.log(err);
76 }
77 })
78 }
79
80 // 对 todolist 进行逆向排序（使新录入的项目显示在列表上面）
81 todoSort (todoList) {
82 todoList.reverse();
83 return todoList;
84 }
85
86 // 提交表单操作
87 handleSubmit(event){
88
89 event.preventDefault();
90 // 表单输入为空验证
91 if(this.refs.content.value == "") {
92 this.refs.content.focus();
93 this.setState({
94 showTooltip: true
95 });
96 return ;
97 }
98 // 生成参数
99 var newItem={
100 content: this.refs.content.value,
101 date: (new Date().getMonth() +1 ) + "/"
102 + new Date().getDate() + " "
103 + new Date().getHours() + ":"
104 + new Date().getMinutes() + ":"
105 + new Date().getSeconds()
106 };
107 // 添加 todo
108 this._onNewItem(newItem)
109 // 重置表单
110 this.refs.todoForm.reset();
111 // 隐藏提示信息
112 this.setState({
113 showTooltip: false,
114 });
115 }
116
117 render() {
118 return (
119 <div>
120 <h2>
121 <form>
122 <input ref="content" type="text" placeholder="Type content here...">
123 { this.state.showTooltip &&
124 <span>
125 }
126 </form>
127 <TodoList todoList={this.state.todoList} onDeleteItem={this._onDeleteItem.bind(this)} />
128 </div>
129 )
130 }
131 }
132
133 export default Todo;
页:
[1]