lovecoding
/
VIP32


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252
							<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../babel.min.js"></script>
    <script src="../react.development.js"></script>
    <script src="../react-dom.development.js"></script>
    <link rel="stylesheet" href="./index.css" />
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">
      const root = ReactDOM.createRoot(document.getElementById("root"));
      function App() {
        return (
          <div>
            <Box />
          </div>
        );
      }

      class Box extends React.Component {
        constructor() {
          super();
          this.state = {
            todos: [
              {
                id: 1,
                title: "吃饭",
                completed: true,
              },
              {
                id: 2,
                title: "睡觉",
                completed: false,
              },
            ],
            filters: "all",
          };
        }
        // 渲染todo列表
        renderTodos() {
          let { todos, filters } = this.state;
          // 如果 filters是all 显示全部的todos
          if (filters === "all") return todos;
          return todos.filter((todo) =>
            filters === 'active' ? !todo.completed : todo.completed
          );
        }
        // 添加内容
        addMain(value) {
          this.setState((prevState) => ({
            todos: [
              ...prevState.todos,
              {
                id: Date.now(),
                title: value,
                completed: false,
              },
            ],
          }));
        }
        // 选择哪项
        chooseMain(ids) {
          let { todos } = this.state;
          this.setState((prevState) => {
            for (var i = 0; i < todos.length; i++) {
              if (todos[i].id === ids) {
                todos[i].completed = !todos[i].completed;
              }
            }
            return { todos };
          });
        }
        // 删除选项
        removeMain(ids) {
          if (!confirm("您确定删除么")) {
            return;
          }
          let { todos } = this.state;
          this.setState((prev) => ({
            todos: prev.todos.filter((t) => {
              return t.id !== ids;
            }),
          }));
        }
        // 勾选
        allChoose(isCheck) {
          let { todos } = this.state;
          this.setState((prev) => ({
            todos: prev.todos.map((ele) => {
              ele.completed = isCheck;
              return ele;
            }),
          }));
        }
        // 未选中的
        countUnSelected() {
          return this.state.todos.filter((ele) => !ele.completed).length;
        }
        // 设置过滤项
        setFilters(text) {
          this.setState({
            filters: text,
          });
        }
        // 清除所有完成项
        clearCompletedTodo() {
          if (!confirm('确定清除所有完成项吗？')) return;

          this.setState((prevState) => ({
            todos: prevState.todos.filter((todo) => !todo.completed),
          }));
        }
        render() {
          return (
            <section className="todoapp">
              <Header addList={this.addMain.bind(this)} />
              <Main
                todos={this.renderTodos()}
                choose={this.chooseMain.bind(this)}
                remove={this.removeMain.bind(this)}
                all={this.allChoose.bind(this)}
              />
              <Footer
                count={this.countUnSelected()}
                setFilters={this.setFilters.bind(this)}
                filter={this.state.filters}
                clear={this.clearCompletedTodo.bind(this)}
              />
            </section>
          );
        }
      }
      function Header({ addList }) {
        return (
          <header className="header">
            <h1>todos</h1>
            <input
              autoFocus="autofocus"
              autoComplete="off"
              placeholder="输入您要完成的任务?"
              className="new-todo"
              onKeyUp={(e) => {
                if (e.keyCode === 13) {
                  addList(e.target.value);
                  e.target.value = "";
                }
              }}
            />
          </header>
        );
      }
      function Main({ todos, choose, remove, all }) {
        return (
          <section className="main">
            <input
              id="toggle-all"
              type="checkbox"
              onChange={(e) => {
                all(e.target.checked);
              }}
              className="toggle-all"
            />
            <label htmlFor="toggle-all"></label>
            <ul className="todo-list">
              {todos &&
                todos.map((ele) => (
                  <Item
                    key={ele.id}
                    todo={ele}
                    onChoose={choose}
                    onRemove={remove}
                  />
                ))}
            </ul>
          </section>
        );
      }
      function Item({ todo, onChoose, onRemove }) {
        return (
          <li className="todo">
            <div className="view">
              <input
                type="checkbox"
                checked={todo.completed}
                className="toggle"
                onChange={() => onChoose(todo.id)}
              />
              <label>{todo.title}</label>
              <button
                className="destroy"
                onClick={() => onRemove(todo.id)}
              ></button>
            </div>
            <input type="text" className="edit" />
          </li>
        );
      }
      function Footer({ count, setFilters, filter, clear }) {
        return (
          <footer className="footer">
            <span className="todo-count">
              <strong>{count}</strong> items left{" "}
            </span>
            <ul className="filters">
              <li>
                <a
                  href="#/all"
                  className={filter === "all" ? "selected" : ""}
                  onClick={() => {
                    setFilters("all");
                  }}
                >
                  All
                </a>
              </li>
              <li>
                <a
                  href="#/active"
                  className={filter === "active" ? "selected" : ""}
                  onClick={() => {
                    setFilters("active");
                  }}
                >
                  Active
                </a>
              </li>
              <li>
                <a
                  href="#/completed"
                  className={filter === "completed" ? "selected" : ""}
                  onClick={() => {
                    setFilters("completed");
                  }}
                >
                  Completed
                </a>
              </li>
            </ul>
            <button className="clear-completed" onClick={clear}>
              Clear completed
            </button>
          </footer>
        );
      }
      root.render(<App />);
    </script>
  </body>
</html>