lovecoding
/
w1020


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201
							<!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"
                }
                this.unChooseThing = this.unChooseThing.bind(this);
            }
            unChooseThing() {
                // 过滤出未选中的数量
                // 通过判断每一项中的completed字段 如果是false就是未选择
                // 数组中数据是不确定的 但是每一条都需要去判断 所以进行循环
                // 对每一条都进行过滤 
                // this.state.todos
                let { todos } = this.state;
                return todos.filter((item) => !item.completed).length;
            }
            chooseThing(val) {
                console.log(val);
                let { todos } = this.state;
                this.setState(() => {
                    for (let i = 0; i < todos.length; i++) {
                        if (todos[i].id === val) {
                            todos[i].completed = !todos[i].completed;
                        }
                    }
                    return { todos }
                })
            }
            addTodos(val) {
                console.log("按下", val)
                this.setState((prevState) => ({
                  
                        todos: [
                            ...prevState.todos,
                            {
                                id: Date.now(),
                                title: val,
                                completed: false
                            }
                        ]
                    
                }))
            }
            changeFilter(val) {
                 this.setState({
                    filters: val
                 })
            }
            renderList() {
                let {todos,filters} = this.state;
                if(filters == 'all')  return todos; 
                // else if (filters == 'active') {
                //    return todos.filter((item) => item.completed == false)
                // } else {
                //     return todos.filter((item) => item.completed == true)
                // }
              return todos.filter((item) => filters === 'active' ? !item.completed : item.completed)
                
            }
            clearThing(val) {
                if(!confirm("您确定删除该条数据么？")) return;
                let {todos} = this.state;
                this.setState((prevState) =>({
                    todos: prevState.todos.filter((item)=> item.id !== val)
                }))
            }
            toggle(val) {
                console.log(val)
                const {todos} = this.state;
                this.setState((prevState) => ({
                    todos:prevState.todos.map((item)=> {
                        item.completed = val;
                        return item;
                    })
                }))
            }
            render() {
                return (
                    <section className="todoapp">
                        <Header addThing={this.addTodos.bind(this)} />
                        <Main
                            todos={this.renderList()}
                            handleChoose={this.chooseThing.bind(this)}
                            remove={this.clearThing.bind(this)}
                            toggleThing={this.toggle.bind(this)}
                        />
                        <Footer unChoose={this.unChooseThing()} filter={this.state.filters} setFilter={this.changeFilter.bind(this)} />
                    </section>

                )
            }
        }
        function Header({ addThing }) {
            return (
                <header className="header">
                    <h1>todos</h1>
                    <input
                        autoFocus="autofocus"
                        autoComplete="off"
                        placeholder="输入您要完成的任务?"
                        className="new-todo"
                        onKeyDown={(e) => {
                            if (e.keyCode == 13) {
                                addThing(e.target.value)
                            }
                            e.target.value = '';
                        }}
                    />
                </header>
            )
        }
        function Main({ todos, handleChoose,remove,toggleThing }) {
            console.log(todos, '121')
            return (
                <section className="main">
                    <input id="toggle-all" type="checkbox" className="toggle-all" onChange={(e)=>toggleThing(e.target.checked)} />
                    <label htmlFor="toggle-all"></label>
                    <ul className="todo-list">
                        {
                            todos && todos.map((item) => { return <Only key={item.id} todo={item} choose={handleChoose} removeThing={remove} /> })
                        }
                    </ul>
                </section>
            )
        }
        function Footer({ unChoose,filter,setFilter }) {
            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={()=>{
                            setFilter('all')
                        }}>All</a></li>
                        <li><a href="#/active" className={filter == 'active' ? 'selected' : ''} onClick={()=>{
                            setFilter('active')
                        }}>Active</a></li>
                        <li><a href="#/completed" className={filter == 'completed' ? 'selected' : ''} onClick={()=>{
                            setFilter('completed')
                        }}>Completed</a></li>
                    </ul>
                    <button className="clear-completed">Clear completed</button>
                </footer>
            )
        }
        function Only({ todo, choose,removeThing }) {
            return (
                <li className="todo">
                    <div className="view">
                        <input type="checkbox" checked={todo.completed}
                            onChange={() => choose(todo.id)} className="toggle" />
                        <label>{todo.title}</label>
                        <button className="destroy" onClick={()=>{
                            removeThing(todo.id)
                        }}></button>
                    </div>
                    <input type="text" className="edit" />
                </li>
            )
        }
        root.render(<App />);
    </script>
</body>

</html>