React 实战 Todolist (下)

写在前面

最近在学 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} />