【React入门实践】结合Ant-Design 从0带你手把手开发包含【列表】和【搜索栏】的简单【用户管理

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>

        )}

        {value.status === 1 && (

          <a type="primary" onClick={() => toggleDetail(value.id)}>

            查看

          </a>

        )}

      </>

    )

  }

],

[toggleDetail, toggleMessage]

)

return (

<PageHeaderLayout className={'commonList'}>

  <Search init={init} dispatch={dispatch} />

  <Card

    className={styles.table}

    style={{ marginTop: 1 }}

    bordered={false}

    bodyStyle={{ padding: '8px 32px 32px 32px' }}

  >

    <StandardTable

      loading={loading}

      data={listData}

      columns={columns}

      onChange={handleStandardTableChange}

    />

  </Card>

</PageHeaderLayout>

)

}

### （2）search查询栏部分

const Search: any = Form.create()(function({ form, init, dispatch }: any) {

const { validateFields } = form

const simpleForm = useMemo(() => {

const { getFieldDecorator, getFieldValue } = form

const { query } = getLocation()



return (

  <Form

    layout="inline"

    style={{ display: 'flex' }}

    className={styles.commonForm}

  >

    <Form.Item label="">

      {getFieldDecorator('username', {

        initialValue: query.username

      })(<Input placeholder="用户名" />)}

    </Form.Item>

    <Form.Item label="">

      {getFieldDecorator('title', {

        initialValue: query.title

      })(<Input placeholder="标题" />)}

    </Form.Item>

    <Form.Item label="">

      {getFieldDecorator('submitTimeBegin', {

        initialValue: query.startDate || ''

      })(

        <DatePicker

          onChange={change1}

          disabledDate={disabledDate1}

          placeholder="请选择日期"

        />

      )}

    </Form.Item>

    <Form.Item label="">

      {getFieldDecorator('submitTimeEnd', {

        initialValue: query.startDate || ''

      })(

        <DatePicker

          onChange={change2}

          disabledDate={disabledDate2}

          placeholder="请选择日期"

        />

      )}

    </Form.Item>

    <Form.Item>

      {getFieldDecorator('status', {

        initialValue: query.status || ''

      })(

        <Select>

          <Option value={''}> 状态 </Option>

          {feedbackStatus.map((v: any) => (

            <Option key={v.key} value={v.key}>

              {v.value}

            </Option>

          ))}

        </Select>

      )}

    </Form.Item>

    <Button className={styles.search} onClick={handleSearch} icon="search">

      查询

    </Button>

    <Button

      className={styles.reset}

      style={{ marginLeft: 10 }}

      onClick={handleFormReset}

      icon="undo"

    >

      重置

    </Button>

  </Form>

)

}, [form, handleFormReset, handleSearch, time1, time2])

return (

<Card bordered={false}>

  <div className={'commonForm'}>{simpleForm}</div>

</Card>

)

})

可以看到，在页面将search设置成组件，并在后面掉哦组件。至此已达到页面效果，但是还没有数据



![](https://img-blog.csdnimg.cn/20210910100843557.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5bCP55m9UmFjaGVs,size_20,color_FFFFFF,t_70,g_se,x_16)



 4.初始化页面 - 列表数据显示

-----------------



在page页面的主函数中写init函数

const init = useCallback(() => {

dispatch('feedback/init')

}, [dispatch])

useEffect(() => {

init()

}, [init])

 在model页面中写详细的接口调用信息

init: async (action, { dispatch }) => {

  const { query } = getLocation()

  const data = await dispatch({

    type: 'feedback/post',

    params: ['manage/feedback/page', { ...query }]

  })

  dispatch({

    type: 'feedback/setStore',

    params: [{ listData: listMOM1(data) }]

  })

},

 其中我们使用到了ListMOM1组件来帮助页面数据回显，其主要功能是，添加页面的数据编号和实现分页功能，详细的封装代码后附。



其中type: 'feedback/setStore',表示把数据存储在缓存中，可以通过组件传递数据，因此在StandardTable中需要绑定data={listData}，从而实现数据初始化显示。

// list数据处理中间件

export const listMOM1 = (resData: any) => {

const {

content,

// total,

totalCount,

currPage: currPage = 1,

pageSize: pageSize = 40,

data,

list

} = resData

const list1 = content || data || list

//添加序号

if (list) {

list.forEach((element: any, index: number) => {

  element._id = index + 1 + (currPage - 1) * pageSize

  element._symbol = element._id

})

}

//分页

const pagination = {

total: totalCount,

pageSize: Number(pageSize) || 40,

current: Number(currPage)

}

return {

list,

pagination: totalCount && { ...listData.pagination, ...pagination }

}

}

5.列表数据按需渲染render

----------------



可以看到后台返回的数据如下，



![](https://img-blog.csdnimg.cn/20210926095947996.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5bCP55m9UmFjaGVs,size_20,color_FFFFFF,t_70,g_se,x_16)



 但是，（1）【标题和内容】数据过长，我们需要将其展示前5个字符后省略号（比如这样就。。。）.（2）对于【日期】数据只需要显示到具体某天，不需要时分秒，（3）对于【状态】数据显示为0，1但是前端也需要整理为‘未回答’‘已回答’



（1）数据截取缩略显示，hover后显示全部---使用Tooltip组件

{

title: '反馈内容',

    dataIndex: 'content',

    render: (text: any, record: any, index: any) => {

      if (record.content.length <= 5) {

        return record.content

      } else {

        return (

          <Tooltip title={record.content}>

            {record.content.substring(0, 5) + '...'}

          </Tooltip>

        )

      }

    }

  },

（2）日期截取同理

{

    title: '提交时间',

    dataIndex: 'createdTime',

    render: (text: any, record: any, index: any) => {

      return record.createdTime.substring(0, 10)

    }

  },

（3）对于接口返回的0，1，2状态数值数据需要分情况渲染

{

    title: '状态',

    dataIndex: 'status',

    render: (value: any) => (

      <>

        {value == 0 && <Tag color="red">未回答</Tag>}

最后

正值招聘旺季，很多小伙伴都询问我有没有前端方面的面试题！

    )

      }

    }

  },

（2）日期截取同理

{

    title: '提交时间',

    dataIndex: 'createdTime',

    render: (text: any, record: any, index: any) => {

      return record.createdTime.substring(0, 10)

    }

  },

（3）对于接口返回的0，1，2状态数值数据需要分情况渲染

{

    title: '状态',

    dataIndex: 'status',

    render: (value: any) => (

      <>

        {value == 0 && <Tag color="red">未回答</Tag>}

最后

正值招聘旺季，很多小伙伴都询问我有没有前端方面的面试题！