lovecoding
/
web0715


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231
							<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- jsx 语法浏览器不识别 jsx => js 浏览器可识别的语言 -->
    <script src="../babel.min.js"></script>
    <!-- react的核心库 -->
    <script src="../react.development.js"></script>
    <!-- 解析react中的dom库 -->
    <script src="../react-dom.development.js"></script>
    <link rel="stylesheet" href="./index.css" />
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">
      let 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", //complete active all
          };
          this.unChooseMain = this.unChooseMain.bind(this);
        }

        // 渲染列表
        renderList() {
          //   console.log(this.state.todos, "this.state.todos");
          const { todos, filters } = this.state;
          // 如果filters是all 显示所有的todos
          // 如果filters是active 显示complete是false
          // 如果filters是complete 显示complete是true
          if (filters === "all") return todos;
          return todos.filter((ele) =>
            filters === "active" ? !ele.completed : ele.completed
          );
        }
        // 添加数据
        addMain(val) {
          console.log(val, "值");
          this.setState((prevState) => ({
            todos: [
              ...prevState.todos,
              {
                id: Date.now(),
                title: val,
                completed: false,
              },
            ],
          }));
        }
        // 选中项
        chooseMain(val) {
          const { todos } = this.state;
          this.setState(() => {
            for (var i = 0; i < todos.length; i++) {
              if (todos[i].id === val) {
                todos[i].completed = !todos[i].completed;
              }
            }
            return {todos}
          });
        }
        // 删除项
        removeMain(val) {
          if(!confirm("您确定删除该条数据么")) return;
          const {todos} = this.state;
          this.setState((prevState)=>({
            todos: prevState.todos.filter((ele)=>{
              return ele.id !== val;
            })
          }))          
        }
        // 未选择项
        unChooseMain() {
          const {todos} = this.state;
          return todos.filter((ele) => !ele.completed).length;
        }
        // 切换过滤项
        setFilters(val) {
          console.log(this.state,'3333',val)
          this.setState({
            filters: val
          })
        }
        // 全选
        allChoose(val) {
          console.log(val,'val')
          const {todos} = this.state;
          this.setState((prevState)=>({
            todos:prevState.todos.map((ele)=>{
              ele.completed = val;
              return ele;
            })
          }))
        }
        render() {
          // console.log(this)
          // const {todos} = this.state
          return (
            <div>
              <section className="todoapp">
                {/*头部*/}
                <Header addList={this.addMain.bind(this)}  />
                {/*主体*/}
                <Main
                  toggle={this.allChoose.bind(this)}
                  todos={this.renderList()}
                  choose={this.chooseMain.bind(this)}
                  remove = {this.removeMain.bind(this)}
                />
                {/*尾部*/}
                <Footer unChoose= {this.unChooseMain()} filter={this.state.filters} setMain={this.setFilters.bind(this)} />
              </section>
            </div>
          );
        }
      }

      function Header({ addList }) {
        return (
          <header className="header">
            <h1>todos</h1>
            <input
              autoFocus="autofocus"
              autoComplete="off"
              placeholder="输入您要完成的任务?"
              className="new-todo"
              onKeyDown={(e) => {
                if (e.keyCode == 13) {
                  addList(e.target.value);
                  e.target.value = "";
                }
              }}
            />
          </header>
        );
      }

      function Main({ todos, choose,remove,toggle }) {
        // console.log(todos,'todos')
        return (
          <section className="main">
            <input id="toggle-all" type="checkbox" className="toggle-all" onChange={(e)=>{toggle(e.target.checked)}} />
            <label htmlFor="toggle-all"></label>
            <ul className="todo-list">
              {todos &&
                todos.map((ele) => (
                  <Item key={ele.id} todo={ele} choice={choose} del={remove} />
                ))}
            </ul>
          </section>
        );
      }
      function Footer({unChoose, filter, setMain}) {
        return (
          <footer className="footer">
            <span className="todo-count">
              <strong>{unChoose}</strong> items left{" "}
            </span>
            <ul className="filters">
              <li>
                <a href="#/all" className={filter == 'all' ? 'selected' : ''} onClick={()=>{
                  setMain("all")
                }}>
                  All
                </a>
              </li>
              <li>
                <a href="#/active" className={filter == 'active' ? 'selected' : ''} onClick={()=>{
                  setMain("active")
                }}>
                  Active
                </a>
              </li>
              <li>
                <a href="#/completed"  className={filter == 'completed' ? 'selected' : ''} onClick={()=>{
                  setMain("completed")
                }}>
                  Completed
                </a>
              </li>
            </ul>
            <button className="clear-completed">Clear completed</button>
          </footer>
        );
      }
      function Item({ todo, choice,del }) {
        // console.log(todo,{})
        return (
          <li className="todo">
            <div className="view">
              <input
                type="checkbox"
                checked={todo.completed}
                onChange={() => choice(todo.id)}
                className="toggle"
              />
              <label>{todo.title}</label>
              <button className="destroy" onClick={()=> del(todo.id)}></button>
            </div>
            <input type="text" className="edit" />
          </li>
        );
      }
      root.render(<App />);
    </script>
  </body>
</html>