北海网站优化,中国阳江网络问政平台,属于网络营销站点推广的是,0基础做网站多久背景
使用 React Hooks 以及组件库 Antd 来实现一个可以 增删 标记是否完成 的 todo-list
思路
要实现一个 todo-list 首先想到用 useState 维护一个状态数组来保存当前 list #xff0c;还要用一个状态维护添加框中的内容 const [todos, setTodos] useState(initialValu…背景
使用 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 typeprimary onClick{handleAddTodo}添加/Buttonul{todos.map((todo, index) (li key{index} style{{ marginBottom: 15 }}SpaceCheckboxchecked{todo.completed}onChange{() handleToggleComplete(index)}/{todo.text}Tag color{todo.completed ? green : red}{todo.completed ? 已完成 : 待办}/TagButton typedashed 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 已经完成 可以在这个基础上进行其他功能的添加
完成代码
以上步骤所有的完整代码点开即用
链接
