React 实战 Todolist (下)

Posted 2023-02-28 小生凡一

写在前面

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