简单的购物网站怎么做,深圳做网站seo,内容管理系统软件,网站建设 镇江文章目录 效果功能-状态管理相关接口定义相关方法定义 UIinput输入框#xff1a;回车添加todo标题列表列表项Main 总体代码 非常简单入门的react-todo练习#xff0c;代码写的很小白。 效果
技术栈#xff1a;react-typeScript
数据分为代办Todo和已办完Done#xff0c;可… 文章目录 效果功能-状态管理相关接口定义相关方法定义 UIinput输入框回车添加todo标题列表列表项Main 总体代码 非常简单入门的react-todo练习代码写的很小白。 效果
技术栈react-typeScript
数据分为代办Todo和已办完Done可以点击复选框切换状态可以添加代办事件会用到useState和useReducer详情看状态管理 – React 中文文档 接下来是代码实现。
功能-状态管理 相关参考 TypeScript中的标记联合类型实现Todo代办-CSDN博客 迁移状态逻辑至 Reducer 中 – React 中文文档 (docschina.org) 相关接口定义
Todo的状态表示 text表示代办内容done表示是否完成id表示它在列表中的位置。 interface Todo {readonly text: string;readonly done: boolean;readonly id: number;
}对Todo的操作表示
interface AddTodo {type: Add_TODO;text: string;
}interface ToggleTodo {type: TOGGLE_TODO;index: number;
}// 操作只有添加todo和修改todo两种
type TodoAction AddTodo | ToggleTodo;相关方法定义
操作Todo的方法
// 点击修改状态
function todoReducer(list: ArrayTodo, action: TodoAction): ArrayTodo {switch (action.type) {case Add_TODO: {return [...list,{text: action.text,done: false,id: list.length,},];}case TOGGLE_TODO: {return list.map((item, index) {if (index ! action.index) {return item;}return {text: item.text,done: !item.done,id: item.id,};});}default: {return list;}}
}useReducer部分写在比较父级的组件中。把对应方法用prop的方式传给需要用的子组件。此博客写在了Main组件中。
// useReducer
const [todoList, dispatch] useReducer(todoReducer, initTodo);function handleAddTodo(text: string) {dispatch({type: Add_TODO,text: text,});
}function handleToggleTodo(index: number) {dispatch({type: TOGGLE_TODO,index: index,});
}模拟的数据initTodo
// 模拟数据
const initTodo: ArrayTodo [{text: 吃饭,done: true,id: 0,},{text: 睡觉,done: true,id: 1,},{text: 上班,done: true,id: 2,},{text: 下班,done: false,id: 3,},{text: 运动,done: false,id: 4,},{text: 听歌,done: false,id: 5,},
];UI
react是非常组件化的框架。此Todo可以拆成好几个组件
input输入框回车添加todo标题列表分开显示Todo/Done的列表列表项
input输入框回车添加todo
这里需要用useState管理input输入的状态。 注意每个input框都要绑定onChange或readonly否则会报错。 当回车时添加输入框中的值到Todo的列表即触发前面定义的handleAddTodo方法。此方法在这里没有定义因此要从定义它的地方Main传过来。
function Add({ handleAddTodo }: { handleAddTodo: Function }) {const [inputValue, setInputValue] useState();return (div classNameheaderinputtypetextvalue{inputValue}onChange{(e) {setInputValue(e.target.value);}}onKeyDown{(e) {if (e.key Enter) {handleAddTodo(inputValue);setInputValue();}}}placeholder在这里添加新的代办事件//div/);
}标题
// 标题
function ShowTitle({ title }: { title: string }) {return (h2{title}/h2/);
}列表
todoList是reduce中管理的所有事项的列表。done表示当前列表是代办false还是已完成truehandleToggleTodo是点击复选框更改列表项状态的方法
// 展示todo的列表
function ShowList({todoList,done,handleToggleTodo,
}: {todoList: ArrayTodo;done: boolean;handleToggleTodo: Function;
}) {const data todoList.filter((item) {return item.done done;});const show data.map((item) {return (ListItemkey{item.id}item{item}handleToggleTodo{handleToggleTodo}/ListItem);});return {show}/;
}列表项
// list的每一项
function ListItem({item,handleToggleTodo,
}: {item: Todo;handleToggleTodo: Function;
}) {return (div classNameiteminputtypecheckboxchecked{item.done}onChange{() {handleToggleTodo(item.id);}}nameid/{item.text}/div);
}Main
function Main() {// useReducerconst [todoList, dispatch] useReducer(todoReducer, initTodo);function handleAddTodo(text: string) {dispatch({type: Add_TODO,text: text,});}function handleToggleTodo(index: number) {dispatch({type: TOGGLE_TODO,index: index,});}return (Add handleAddTodo{handleAddTodo}/AddShowTitle title{Todo}/ShowTitleShowListtodoList{todoList}done{false}handleToggleTodo{handleToggleTodo}/ShowListShowTitle title{Done}/ShowTitleShowListtodoList{todoList}done{true}handleToggleTodo{handleToggleTodo}/ShowList/);
}总体代码
import { useState, useReducer } from react;// 标题
function ShowTitle({ title }: { title: string }) {return (h2{title}/h2/);
}// 添加todo的输入框
function Add({ handleAddTodo }: { handleAddTodo: Function }) {const [inputValue, setInputValue] useState();return (div classNameheaderinputtypetextvalue{inputValue}onChange{(e) {setInputValue(e.target.value);}}onKeyDown{(e) {if (e.key Enter) {handleAddTodo(inputValue);setInputValue();}}}placeholder在这里添加新的代办事件//div/);
}// list的每一项
function ListItem({item,handleToggleTodo,
}: {item: Todo;handleToggleTodo: Function;
}) {return (div classNameiteminputtypecheckboxchecked{item.done}onChange{() {handleToggleTodo(item.id);}}nameid/{item.text}/div);
}// 展示todo的列表
function ShowList({todoList,done,handleToggleTodo,
}: {todoList: ArrayTodo;done: boolean;handleToggleTodo: Function;
}) {const data todoList.filter((item) {return item.done done;});const show data.map((item) {return (ListItemkey{item.id}item{item}handleToggleTodo{handleToggleTodo}/ListItem);});return {show}/;
}function Main() {// useReducerconst [todoList, dispatch] useReducer(todoReducer, initTodo);function handleAddTodo(text: string) {dispatch({type: Add_TODO,text: text,});}function handleToggleTodo(index: number) {dispatch({type: TOGGLE_TODO,index: index,});}return (Add handleAddTodo{handleAddTodo}/AddShowTitle title{Todo}/ShowTitleShowListtodoList{todoList}done{false}handleToggleTodo{handleToggleTodo}/ShowListShowTitle title{Done}/ShowTitleShowListtodoList{todoList}done{true}handleToggleTodo{handleToggleTodo}/ShowList/);
}function App() {return (div classNamemainMain/Main/div/);
}interface Todo {readonly text: string;readonly done: boolean;readonly id: number;
}interface AddTodo {type: Add_TODO;text: string;
}interface ToggleTodo {type: TOGGLE_TODO;index: number;
}// 操作只有添加todo和修改todo两种
type TodoAction AddTodo | ToggleTodo;// 点击修改状态
function todoReducer(list: ArrayTodo, action: TodoAction): ArrayTodo {switch (action.type) {case Add_TODO: {return [...list,{text: action.text,done: false,id: list.length,},];}case TOGGLE_TODO: {return list.map((item, index) {if (index ! action.index) {return item;}return {text: item.text,done: !item.done,id: item.id,};});}default: {return list;}}
}// 模拟数据
const initTodo: ArrayTodo [{text: 吃饭,done: true,id: 0,},{text: 睡觉,done: true,id: 1,},{text: 上班,done: true,id: 2,},{text: 下班,done: false,id: 3,},{text: 运动,done: false,id: 4,},{text: 听歌,done: false,id: 5,},
];export default App;
