lovecoding
/
W250511


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177
							<!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">
        let root = ReactDOM.createRoot(document.getElementById("root"));
        function App() {
            return <Box />
        }
        class Box extends React.Component {
            constructor() {
                super();
                this.state = {
                    todos: [
                        {
                            id: 1,
                            title: "吃饭",
                            completed: true
                        },
                        {
                            id: 2,
                            title: "睡觉",
                            completed: false
                        },
                    ],
                    filters: 'all'
                }
                this.unChoose = this.unChoose.bind(this);
            }
            // 添加
            addList(val) {
                this.setState((prevState) => ({
                    todos: [
                        ...prevState.todos,
                        {
                            id: Date.now(),
                            title: val,
                            completed: false
                        }
                    ]
                }))
            }
            // 未选中
            unChoose() {
                const { todos } = this.state;
                return todos.filter((item) => !item.completed).length;
            }
            // 选中项
            chooseMain(val) {
                const { 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 };
                })
            }
            // 删除选中项
            removeItem(val) {
                if (!confirm("您确定删除该条数据么!")) return;
                const { todos } = this.state;
                this.setState((prevState) => ({
                    todos: prevState.todos.filter((ele) => {
                        return ele.id !== val
                    })
                }))

            }
            // 切换状态
            setFilters(val) {
                console.log(val)
                this.setState({
                    filters: val
                })
            }
            // 全选
            allChoose(val){
                console.log(val)
                const {todos} = this.state;
                this.setState((prevState) => ({
                    todos:prevState.todos.map((item) => {
                        item.completed = val;
                        return item
                    })
                }))
            }
            // 渲染列表
            renderList() {
                const { todos, filters } = this.state;
                if (filters == 'all') return todos;
                return todos.filter((item) => filters === 'active' ? !item.completed : item.completed)
            }
            render() {
                return (
                    <div>
                        <section className="todoapp">
                            <Header addMain={this.addList.bind(this)}></Header>
                            <Main allChoice={this.allChoose.bind(this)} todos={this.renderList()} choose={this.chooseMain.bind(this)} remove={this.removeItem.bind(this)}></Main>
                            <Footer unChooseMain={this.unChoose()} setFilterMain={this.setFilters.bind(this)} main={this.state.filters}></Footer>
                        </section>
                    </div>
                )
            }
        }
        function Header({ addMain }) {
            return (
                <header className="header">
                    <h1>todos</h1>
                    <input
                        autoFocus="autofocus"
                        autoComplete="off"
                        placeholder="输入您要完成的任务?"
                        className="new-todo"
                        onKeyDown={(e) => {
                            if (e.keyCode === 13) {
                                addMain(e.target.value);
                                e.target.value = '';
                            }
                        }}
                    />
                </header>
            )
        }
        function Main({ todos, choose, remove,allChoice }) {
            return (
                <section className="main">
                    <input id="toggle-all" type="checkbox" className="toggle-all" onChange={(e)=>allChoice(e.target.checked)} />
                    <label htmlFor="toggle-all"></label>
                    <ul className="todo-list">
                        {todos.map((item) => <Item choice={choose} removeId={remove} todo={item} key={item.id}></Item>)}
                    </ul>
                </section>
            )
        }
        function Footer({ unChooseMain, setFilterMain, main }) {
            return (
                <footer className="footer">
                    <span className="todo-count"><strong>{unChooseMain}</strong> items left </span>
                    <ul className="filters">
                        <li><a href="#/all" onClick={() => { setFilterMain('all') }} className={main === 'all' ? 'selected' : ''}>All</a></li>
                        <li><a href="#/active" onClick={() => { setFilterMain('active') }} className={main === 'active' ? 'selected' : ''}>Active</a></li>
                        <li><a href="#/completed" onClick={() => { setFilterMain('completed') }} className={main === 'completed' ? 'selected' : ''}>Completed</a></li>
                    </ul>
                    <button className="clear-completed">Clear completed</button>
                </footer>
            )
        }
        function Item({ todo, choice, removeId }) {
            return (
                <li className="todo">
                    <div className="view">
                        <input type="checkbox" className="toggle" onChange={() => choice(todo.id)} checked={todo.completed} />
                        <label>{todo.title}</label>
                        <button className="destroy" onClick={() => removeId(todo.id)}></button>
                    </div>
                    <input type="text" className="edit" />
                </li>
            )
        }
        root.render(<App />);
    </script>
</body>

</html>