写在前面
最近在学 react ，所以就顺手写一个
Todolist作为练手项目。
github 地址 : ReactMall
这篇是下，上篇是在这里 React 实战 Todolist (上)
1. 备忘录主体开发
这一篇我们来讲讲这个中间部分是怎么做的
这里我们是直接采用antdpro的组件，非常的方便简洁。
1.1 初始化数据
首先获取用户的list
因为我们之前在request中已经添加过拦截器了，所以这里就不需要自己手动加Authorization了
export const TaskListApi = (params) => request.get("/tasks", {
params });
然后我们直接带上参数（分页的限制）请求即可
const getList =(num)=>{
TaskListApi({
start:num,
limit:pageSize,
}).then(res=>{
if (res.status === 200 && res.data.item !== null ){
res.data.item.map(item=>{
item.start_time = moment(parseInt(item.start_time)*1000).format("YYYY-MM-DD HH:mm:ss");})
setDataSource(res.data.item)
setTotal(res.data.total)
setCurrent(num)
}else if (res.status!==200){
message.error(res.msg).then()
}
})
}
初始化时候的请求列表
// 请求文章列表
useEffect(()=>{
getList(current)
},[])
1.2 列表渲染
直接渲染prolist列表就可以了。
<ProList rowKey="id"
headerTitle="我的备忘录"
dataSource={
dataSource}
showActions="hover"
toolBarRender={
() => {
return [
<TaskForm onCreate={
()=>{
getList(current)
}}/>
];
}}
editable={
{
onSave: async (key, record, originRow) => {
updateList(record)
return true;
},
onDelete: async (key, record, originRow) => {
deleteList(record)
return true;
},
}}
onDataSourceChange={
setDataSource} metas={
{
title: {
dataIndex: 'title',
},
description: {
dataIndex: 'content',
},
subTitle: {
dataIndex: 'start_time',
render: (_, row) => {
return (<Space size={
0}>
<Tag>
{
row.start_time}
</Tag>
</Space>);
},
search: false,
},
actions: {
render: (text, row, index, action) => [
<a onClick={
() => {
action === null || action === void 0 ? void 0 : action.startEditable(row.id);
}} key="link">
编辑
</a>,
],
},
}}/>
2. 新建任务
其实这里就是一个button然后打开弹窗的接口而已。
我们在src下新建一个文件
model 里面是一个 form 表单。
<Modal
wrapClassName="modal-wrap"
okText="提交"
cancelButtonProps={
{
shape: 'round' }}
okButtonProps={
{
shape: 'round' }}
width={
600}
open={
visiable}
title="新建任务"
onCancel={
close}
onOk={
submit}
>
<div className="form">
<Form form={
form} labelCol={
{
span: 4 }} wrapperCol={
{
span: 16 }} onFinish={
onSubmit}>
<Form.Item
label="标题"
name="title"
rules={
[{
required: true, message: 'Please input title!' }]}
>
<Input />
</Form.Item>
<Form.Item
label="内容"
name="content"
rules={
[{
required: true, message: 'Please input content!' }]}
>
<Input />
</Form.Item>
</Form>
</div>
</Modal>
- 提交form表单
const onSubmit = (values) =>{
let {
title,content } = values;
TaskCreateApi({
title:title,
content:content}).
then(res =>{
if(res.status===200){
message.success(res.msg).then()
}else{
message.error(res.msg).then()
}
if (onCreate){
onCreate()
}
})
form.resetFields();
close()
}
这里我们需要把当前页面的getList函数和current传进去，然后当我们创建完之后，再一次渲染列表。这里就是父组件给子组件传值了。
const onSubmit = (values) =>{
let {
title,content } = values;
TaskCreateApi({
title:title,
content:content}).
then(res =>{
if(res.status===200){
message.success(res.msg).then()
}else{
message.error(res.msg).then()
}
if (onCreate){
onCreate()
}
})
form.resetFields();
close()
}
3. 分页组件
我们可以直接使用antd的分页组件。
- current 表示当前页码
- pageSize 表示当前页数
- total 表示总数
<Pagination style={
{
float: 'right',marginTop: '20px'}}
onChange={
onChange}
showTotal={
(total) => `Total ${
total} items`}
total={
total}
current={
current}
pageSize={
pageSize} />