lovecoding
/
VIP20


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143
							<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>代办事项</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">
      function App() {
        return (
          <>
            <TodoApp />
          </>
        );
      }

      class TodoApp extends React.Component {
        constructor() {
          super();
          this.state = {
            todos: [
              {
                id: 1,
                title: '吃饭',
                completed: false,
              },
              {
                id: 2,
                title: '睡觉',
                completed: true,
              },
            ], // 所有代办, 默认值 为 []
            filters: 'all', // 过滤条件 值为 "all | active | completed", 默认值 all
          };
        }

        // 根据filters，todos得到过滤后的代办数组
        renderTodos() {
          let { todos, filters } = this.state;
          if (filters === 'all') return todos;

          // return todos.filter((todo) =>
          //   filters === 'active'
          //     ? todo.completed === false
          //     : todo.completed === true
          // );

          return todos.filter((todo) =>
            filters === 'active' ? !todo.completed : todo.completed
          );
        }

        render() {
          return (
            <section className="todoapp">
              <TodoHeader />
              <TodoMain todos={this.renderTodos()} />
              <TodoFooter />
            </section>
          );
        }
      }

      function TodoHeader() {
        return (
          <header className="header">
            <h1>todos</h1>
            <input
              autoFocus="autofocus"
              autoComplete="off"
              placeholder="输入您要完成的任务?"
              className="new-todo"
            />
          </header>
        );
      }
      function TodoMain({ todos }) {
        return (
          <section className="main">
            <input id="toggle-all" type="checkbox" className="toggle-all" />
            <label htmlFor="toggle-all"></label>
            <ul className="todo-list">
              {todos &&
                todos.map((todo) => <TodoItem key={todo.id} todo={todo} />)}
            </ul>
          </section>
        );
      }
      function TodoFooter() {
        return (
          <footer className="footer">
            <span className="todo-count">
              <strong>0</strong> items left
            </span>
            <ul className="filters">
              <li>
                <a href="#/all" className="selected">
                  All
                </a>
              </li>
              <li>
                <a href="#/active" className="">
                  Active
                </a>
              </li>
              <li>
                <a href="#/completed" className="">
                  Completed
                </a>
              </li>
            </ul>
            <button className="clear-completed">Clear completed</button>
          </footer>
        );
      }
      function TodoItem({ todo }) {
        return (
          <li className="todo">
            <div className="view">
              <input
                type="checkbox"
                className="toggle"
                checked={todo.completed}
              />
              <label>{todo.title}</label>
              <button className="destroy"></button>
            </div>
          </li>
        );
      }

      const root = ReactDOM.createRoot(document.getElementById('root'));
      root.render(<App />);
    </script>
  </body>
</html>