React-TodoList

要求

制作一个 TodoList 实现以下功能：

• 基础任务
  1. 添加 Todo 项
  2. 删除 Todo 项
  3. 标记已完成 Todo 项
  4. 隐藏已完成 Todo 项
• 提高任务
  1. 添加一些样式美化一下
  2. 将顶部输入框和按钮、Todo 列表、隐藏按钮拆分三个组件完成

提示：通过组件通讯实现。

点击查看index.js代码

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { useState} from 'react';

let loop = 0;

function TodoList() {
    let id = 0;
    const [inputValue, setInputValue] = useState("");
    const [changeButton, setChangeButton] = useState(false);
    const [todoList, setTodoList] = useState([
        {id:id++, value: 'Learn HTML', checked: false, hide: false },
        {id:id++, value: 'Learn CSS', checked: false, hide: false },
        {id:id++, value: 'Learn JavaScript', checked: false, hide: false },
        {id:id++, value: 'Learn React', checked: false, hide: false },
    ]);

    const inputTodo = e => {
        setInputValue(e.target.value);
    };

    const addTodo = () => {
        id = loop + 4;
        loop++;
        setTodoList([...todoList, {id:id++, value: inputValue, checked: false, hide: false }]);
        setInputValue("");
    };

    const deleteTodo = (index) => {
        const list = [...todoList];
        list.splice(index, 1);
        setTodoList(list);
    };

    const markTodo = (index) => {
        const list = [...todoList];
        list[index].checked = !list[index].checked;
        setTodoList(list);
    };

    const hideTodo = () => {
        const list = todoList;
        list.map((i) => {
            return <> {(i.checked) ? (i.hide = true) : null} </>
        });
        setTodoList(list);
        setChangeButton(true);
    };

    const showTodo = () => {
        const list = todoList;
        list.map((i) => {
            return <> {(i.hide) ? (i.hide = false) : null} </>
        });
        setTodoList(list);
        setChangeButton(false);
    };

    return (
        <>
            {/*组件一 */}
            <Topinput
                value={inputValue}
                onChange={inputTodo}
                add={addTodo}
            />
            <ul>
                {/* 组件二 */}
                <Todolist
                    list={todoList}
                    mark={markTodo}
                    delete={deleteTodo}
                />
            </ul>
            {/* 组件三 */}
            <Hidebutton
                change={changeButton}
                show={showTodo}
                hide={hideTodo}
            />
        </>
    )
}

function Topinput(props) {
    return (
        <div>
            <input value={props.value} onChange={props.onChange} />
            <button onClick={props.add}>Add Todo</button>
        </div>
    )
}

function Todolist(props) {
    return props.list.map((item, index) => {
        return (
            (!item.hide) &&
            <li key = { item.id }>
                <input type="checkbox" checked={item.checked} onChange={()=>props.mark(index)} />
                <span style={{ 'text-decoration': (item.checked) ? 'line-through' : 'none' }}>
                    {item.value}
                </span>
                    <button onClick={() => props.delete(index)}>X</button>
            </li>
        )
    })
}

function Hidebutton(props) {
    return (
        <div>
            {props.change ?
                <button onClick={props.show}>Show all</button> :
                <button onClick={props.hide}>Hide completed</button>}
        </div>
    )
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<TodoList />);

点击查看css代码

button {
    display: inline-block;
    box-sizing: border-box;
    color: orangered;

    border-image: linear-gradient(to top right, orangered, yellow);
}

li {
    list-style-type: square;
}

div {
    width:fit-content;
    background-image: linear-gradient(to bottom, red, green 20%, orange 80%, blue);
    background-image:
        linear-gradient(to bottom, cyan, transparent),
        linear-gradient(225deg, magenta, transparent),
        linear-gradient(45deg, yellow, transparent);

}

演示