React:删除代办&切换状态

15_React/day-3/react-todolist/index.html

@@ -39,6 +39,41 @@
             ], // 所有代办, 默认值 为 []
             filters: 'all', // 过滤条件 值为 "all | active | completed", 默认值 all
           };
+
+          this.clearCompletedTodos = this.clearCompletedTodos.bind(this);
+          this.removeTodoById = this.removeTodoById.bind(this);
+          this.toggleTodoStatus = this.toggleTodoStatus.bind(this);
+        }
+
+        toggleTodoStatus(id) {
+          this.setState(({ todos }) => {
+            for (var i = 0, l = todos.length; i < l; i++) {
+              if (todos[i].id === id) {
+                todos[i].completed = !todos[i].completed;
+                break;
+              }
+            }
+
+            return {
+              todos,
+            };
+          });
+        }
+
+        removeTodoById(id) {
+          if (!confirm('确定删除当前代办吗？')) return;
+
+          this.setState((prevState) => ({
+            todos: prevState.todos.filter((todo) => todo.id !== id),
+          }));
+        }
+
+        clearCompletedTodos() {
+          if (!confirm('确定清楚所有已完成的代办吗？')) return;
+
+          this.setState((prevState) => ({
+            todos: prevState.todos.filter((todo) => !todo.completed),
+          }));
         }
 
         setFilters(text) {
@@ -94,12 +129,15 @@
               <TodoHeader addTodo={this.addTodo.bind(this)} />
               <TodoMain
                 todos={this.renderTodos()}
-                toggle={this.toggleAllTodoStatus.bind(this)}
+                toggleAll={this.toggleAllTodoStatus.bind(this)}
+                remove={this.removeTodoById}
+                toggle={this.toggleTodoStatus}
               />
               <TodoFooter
                 undoneCount={this.calcUndoneTodoCount()}
                 setFilters={this.setFilters.bind(this)}
                 filter={this.state.filters}
+                clear={this.clearCompletedTodos}
               />
             </section>
           );
@@ -131,7 +169,7 @@
           </header>
         );
       }
-      function TodoMain({ todos, toggle }) {
+      function TodoMain({ todos, toggle, remove, toggleAll }) {
         return (
           <section className="main">
             <input
@@ -139,18 +177,25 @@
               type="checkbox"
               className="toggle-all"
               onChange={(e) => {
-                toggle(e.target.checked);
+                toggleAll(e.target.checked);
               }}
             />
             <label htmlFor="toggle-all"></label>
             <ul className="todo-list">
               {todos &&
-                todos.map((todo) => <TodoItem key={todo.id} todo={todo} />)}
+                todos.map((todo) => (
+                  <TodoItem
+                    key={todo.id}
+                    todo={todo}
+                    onRemove={remove}
+                    onToggle={toggle}
+                  />
+                ))}
             </ul>
           </section>
         );
       }
-      function TodoFooter({ undoneCount, setFilters, filter }) {
+      function TodoFooter({ undoneCount, setFilters, filter, clear }) {
         return (
           <footer className="footer">
             <span className="todo-count">
@@ -191,11 +236,13 @@
                 </a>
               </li>
             </ul>
-            <button className="clear-completed">Clear completed</button>
+            <button className="clear-completed" onClick={clear}>
+              Clear completed
+            </button>
           </footer>
         );
       }
-      function TodoItem({ todo }) {
+      function TodoItem({ todo, onRemove, onToggle }) {
         return (
           <li className="todo">
             <div className="view">
@@ -203,9 +250,13 @@
                 type="checkbox"
                 className="toggle"
                 checked={todo.completed}
+                onChange={() => onToggle(todo.id)}
               />
               <label>{todo.title}</label>
-              <button className="destroy"></button>
+              <button
+                className="destroy"
+                onClick={() => onRemove(todo.id)}
+              ></button>
             </div>
           </li>
         );