列表找房（三）02-下拉选项功能——PickerView组件 & 调用接口获取筛选条件的数据

最新推荐文章于 2024-07-22 16:05:08 发布

viceen

最新推荐文章于 2024-07-22 16:05:08 发布

阅读量337

点赞数

分类专栏：项目-react-移动端文章标签：接口 reactjs

本文链接：https://blog.csdn.net/weixin_44867717/article/details/115712999

版权

项目-react-移动端专栏收录该内容

85 篇文章 7 订阅

订阅专栏

本文档展示了如何在React应用中利用Ant Design的PickerView组件实现动态加载筛选条件数据。首先，通过调用接口获取当前城市ID，然后根据ID获取相应的筛选条件（如区域、租金类型、价格和地铁站）。使用switch语句根据不同的筛选类型传递数据到PickerView组件，实现组件数据的更新。FilterPicker组件能够根据不同的筛选菜单展示不同列数的数据，并提供保存和取消操作。

摘要由CSDN通过智能技术生成

下拉选项功能——PickerView组件 & 调用接口获取筛选条件的数据

调用接口获取筛选条件的数据

PickerView 选择器 https://mobile.ant.design/components/picker-view-cn/
先获取当前城市的信息（城市的唯一ID）
根据城市ID查询相应的筛选条件数据（四种筛选条件的下拉列表数据）
需要重用PickerView组件（前三个筛选菜单进行重用）
- 需要根据点击的不同菜单传递不同的菜单数据，进而改变组件列表的数据信息

src\wiews\Find\components\Filter\indexjs

const { value } = await getCurrentCity()
const res = await axios.get('/houses/condition', {
  params: {
    id: value
  }
})
this.setState({
  filtersData: res.data.body
})

src\wiews\Find\components\Filter\indexjs

// 渲染 FilterPicker 组件
renderFilterPicker() {
  const {
    openType,
    filtersData: { area, rentType, price, subway }
  } = this.state

  if (openType !== 'area' && openType !== 'mode' && openType !== 'price') {
    return null
  }

  // FilterPciker 组件需要的数据
  // cols 表示 PickerView 组件的列数
  let data, cols = 1

  switch (openType) {
    case 'area':
      cols = 3
      data = [area, subway]
      break
    case 'mode':
      data = rentType
      break
    case 'price':
      data = price
      break
    default:
      break
  }

  return (
    <FilterPicker
      data={data}
      cols={cols}
      onSave={this.onSave}
      onCancel={this.onCancel}
    />
  )
}