界面预览
代码详解
首先我们引入antd作为ui库，节省掉无关的一些逻辑，快速的构建出我们的页面骨架
const TAB_ALL = "all";
const TAB_FINISHED = "finished";
const TAB_UNFINISHED = "unfinished";
const tabMap = {
[TAB_ALL]: "全部",
[TAB_FINISHED]: "已完成",
[TAB_UNFINISHED]: "待完成"
};
function App() {
const [activeTab, setActiveTab] = useState(TAB_ALL);
return (
<>
<Tabs activeKey={
activeTab} onChange={
setActiveTab}>
<TabPane tab={
tabMap[TAB_ALL]} key={
TAB_ALL} />
<TabPane tab={
tabMap[TAB_FINISHED]} key={
TAB_FINISHED} />
<TabPane tab={
tabMap[TAB_UNFINISHED]} key={
TAB_UNFINISHED} />
Tabs>
<div className="app-wrap">
<h1 className="app-title">Todo Listh1>
<Input />
<TodoList />
div>
>
);
}
数据获取
有了界面以后，接下来就要获取数据。
模拟api
这里我新建了一个api.js专门用来模拟接口获取数据，这里面的逻辑大概看一下就好，不需要特别在意。
const todos = [
{
id: 1,
text: "todo1",
finished: true
},
{
id: 2,
text: "todo2",
finished: false
},
{
id: 3,
text: "todo3",
finished: true
},
{
id: 4,
text: "todo4",
finished: false
},
{
id: 5,
text: "todo5",
finished: false
}
];
const delay = time => new Promise(resolve => setTimeout(resolve, time));
// 将方法延迟1秒
const withDelay = fn => async (...args) => {
await delay(1000);
return fn(...args);
};
// 获取todos
export const fetchTodos = withDelay(params => {
const {
query, tab } = params;
let result = todos;
// tab页分类
if (tab) {
switch (tab) {
case "finished":
result = result.filter(todo => todo.finished === true);
break;
case "unfinished":
result = result.filter(todo => todo.finished === false);
break;
default:
break;
}
}
// 带参数查询
if (query) {
result = result.filter(todo => todo.text.includes(query));
}
return Promise.resolve({
tab,
result
});
});
这里我们封装了个
最低0.47元/天 解锁文章
1667
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
