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;