背景
使用 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);};
- 至此,可以进行添加,删除,改变完成状态的基本 todo-list 已经完成 ,可以在这个基础上进行其他功能的添加!
完成代码
以上步骤所有的完整代码,点开即用
- 链接