【React入门实践】结合Ant-Design 从0带你手把手开发包含【列表】和【搜索栏】的简单【用户管理】页面_通过 react + ant-d 实现一个管理用户功能,要求包含用户列表,添加编辑用户信息(信-优快云博客

本文链接：https://blog.youkuaiyun.com/Sabrina_cc/article/details/120205120

本文通过一个实战案例，详细介绍了如何使用React和Ant Design构建一个包含搜索功能的列表页面。从页面需求分析、接口文档解读，到UI组件编写、数据渲染和查询功能实现，逐步展示了整个过程。重点讲解了StandardTable组件的使用，以及搜索表单、日期选择器、下拉框等常见组件的集成。此外，还涉及了数据截取、状态转换及日期格式化等细节处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这个世界轻而易举、一蹴而就的事情很少很少。要说真正的有所成，只能是慢慢来。

上节回顾：【React入门实践】结合Ant-Design从0带你手把手开发【个人中心-信息修改】页面_Sabrina_cc的博客-优快云博客

写在前面的话：上节我们实现了简单的是form表单，如下，今天我们来学习最常见的表单组件的使用。一步步向更复杂的页面进发。

本次页面核心知识点：（1）【search表单模块】搜索search、重置功能reset、日期选择器DatePicker、下拉框使用select；（2）【列表展示模块】时间规范化moment、tag标签的使用、省略款的Tooltip使用；

1. 看页面需求

分析：页面分为两个核心部分：【搜索栏】【列表】

2. 分析接口文档

（1）留言列表接口-主要是在页面初始化时调用。pageNum pageSize为请求参数，非必须。响应参数在list中。

（2）搜索接口 - 但搜索接口一般可以直接使用列表接口即可

3. 参照UI编写页面代码

（1）列表部分

使用封装的<StandardTable>组件（代码后附），data={listData}表示列表中绑定listData数据，注意dataIndex需要对照接口返回的参数编写

function Feedback({
  dispatch,
  feedback: { listData, detailData },
  loading
}: any) {
  const init = useCallback(() => {
    dispatch('feedback/init')
  }, [dispatch])

  useEffect(() => {
    init()
  }, [init])

  const columns = useMemo(
    () => [
      {
        title: '序号',
        dataIndex: '_id'
      },
      {
        title: '用户名',
        dataIndex: 'username'
      },
      {
        title: '反馈标题',
        dataIndex: 'title'
      },
      {
        title: '反馈内容',
        dataIndex: 'content',
      },
      {
        title: '提交时间',
        dataIndex: 'createdTime',
      },
      {
        title: '状态',
        dataIndex: 'status',
      },
      {
        title: '操作',
        render: (value: any) => (
          <>
            {value.status === 0 && (
              <a type="primary" onClick={() => toggleMessage(value.id)}>
                反馈留言
              </a>