前端基本功用 React Hooks + Antd 实现一个 Todo-List

背景

使用 React Hooks 以及组件库 Antd 来实现一个可以增删 标记是否完成 的 todo-list
在这里插入图片描述

思路

要实现一个 todo-list 首先想到用 useState 维护一个状态数组来保存当前 list ，还要用一个状态维护添加框中的内容

 const [todos, setTodos] = useState(initialValue);const [inputValue, setInputValue] = useState("");

然后因为是可增删，那要有一个可以增加的 Input 框和添加按钮，删除时要针对所在的那一行，所以每一个待办事项后面都有属于他自己的删除按钮，所以想到用 map 方法来实现每一行代办事项以及完成状态、改变完成状态，删除按钮的展现。
因为我们可以改变当前事项的完成状态，所以我们可以引入一个 Checkbox 标识当前行的完成状态，变为受控组件，可以改变当前行的状态，新增的 Input 框同理

 		<Inputvalue={inputValue}onChange={(e) => setInputValue(e.target.value)}onPressEnter={handleAddTodo}placeholder="输入待办事项"/><Button type="primary" onClick={handleAddTodo}>添加</Button><ul>{todos.map((todo, index) => (<li key={index} style={{ marginBottom: 15 }}><Space><Checkboxchecked={todo.completed}onChange={() => handleToggleComplete(index)}/>{todo.text}<Tag color={todo.completed ? "green" : "red"}>{todo.completed ? "已完成" : "   待办"}</Tag><Button type="dashed" onClick={() => handleDeleteTodo(index)}>删除</Button></Space></li>))}</ul>

最后写一下各种受控组件的 onChange 方法，以及按钮的 onClick 方法，大功告成

const handleAddTodo = () => {if (inputValue.trim() !== "") {setTodos([...todos, { text: inputValue, completed: false }]);setInputValue("");}};const handleDeleteTodo = (index) => {const newTodos = [...todos];newTodos.splice(index, 1);setTodos(newTodos);};const handleToggleComplete = (index) => {const newTodos = [...todos];newTodos[index].completed = !newTodos[index].completed;setTodos(newTodos);};