React+AntdUi实现《好客租房系统》条件找房界面04

2021/7/31 6:07:59

编程Tag： 组件 props return const item 04 area AntdUi 找房

本文主要是介绍React+AntdUi实现《好客租房系统》条件找房界面04，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

一、条件找房界面分为4个部分，搜索部分、条件检索部分、房屋列表和底部。搜索部分和底部用之前封装好的组件即可，条件检索部分如图所示，将所有的条件检索封装到父组件Filter,而四个部分封装到各个组件之中

1.渲染Filter组件，onFilter传递获取的数据,Filter组件中包含了FilterMore、FilterPicker、FilterTitle。FilterTitle 标题菜单组件。FilterPicker 前三个菜单对应的内容组件。FilterMore 最后一个菜单对应的内容组件

FilterTilte
根据标题菜单数据，渲染标题列表,标题可以被点击,点击时高亮
有筛选条件选中时标题高亮状态,提升至父组件Filter中，由父组件提供高亮状态，子组件通过props接受状态来实现高亮
原则：单一数据源，也就是说，状态只应该有一个组件提供并且提供操作状态的方法，其他组件直接使用组件中状态和操作状态的方法即可

// 条件筛选栏标题数组：
const titleList = [
  { title: '区域', type: 'area' },
  { title: '方式', type: 'mode' },
  { title: '租金', type: 'price' },
  { title: '筛选', type: 'more' }
]

export default function FilterTitle(props) {
  const { titleSelectedStatus, onTitleClick } = props;
  return (
    <Flex align="center" className={styles.root}>
      {
        titleList.map((item) => <Flex.Item onClick={() => onTitleClick(item.type)} key={item.type}>
          {/* 根据选中的类名高亮： selected */}
          <span className={[styles.dropdown, titleSelectedStatus[item.type] ? styles.selected : ''].join(' ')}>
            <span>{item.title}</span>
            <i className="iconfont icon-arrow" />
          </span>
        </Flex.Item>)
      }

更新titleSelectStatus，调用父组件的方法onTitleClick,将status传给父组件

  // 传递给子组件控制状态的方法
  onTitleClick = (type) => {
    this.setState({
      titleSelectedStatus: { ...titleSelectedStatus, [type]: true },
      openType: type
    })

FilterPicker
点击前三个标题展示该组件，点击取消的时候隐藏
使用PickerView组件来实现页面效果，获取到PickerView组件中，选中的筛选条件值
点击确定按钮，隐藏该组件，将获取到的筛选条件值传递给父组件，展示或隐藏对话框的状态：由父组件提供，通过props传递给子组件
筛选条件数据：由父组件提供（因为所有筛选条件是通过一个接口来获取的），通过props传递给子组件

  // 设置当前选中状态
  state = {
    value: this.props.value
  }

  componentDidMount() {
    console.log('重新初始化！')
  }

  handlerChange = (value) => {
    this.setState({
      value
    })
  }
  render() {
    const { onCancel, onOk, data, cols } = this.props;
    const { value } = this.state;
    return (
      <>
        {/* 选择器组件： */}
        <PickerView value={value} onChange={this.handlerChange} data={data} cols={cols} />

        {/* 底部按钮 */}
        <FilterFooter onCancel={onCancel} onOk={() => { onOk(value) }} />
      </>
    )

  // 给Picker组件提供数据
  renderFilterPicker = () => {
    if (this.isShow()) {
      const { openType } = this.state;
      const { area, subway, rentType, price } = this.filterData;
      let data, cols = 1;
      switch (openType) {
        case 'area':
          data = [area, subway];
          cols = 3
          break;
        case 'mode':
          data = rentType;
          cols = 1
          break;
        default:
          data = price;
          cols = 1
      }
      console.log('n-sel:', this.selectedValues[openType])
      return <FilterPicker key={openType} data={data} value={this.selectedValues[openType]} cols={cols} onCancel={this.onCancel} onOk={this.onOk} />

    }
  }

FilterMore
能够渲染FilterMore组件
能够实现 清除按钮和确定按钮 的逻辑
能够实现 FilterMore的默认选中
父组件封装renderFilterMore方法，渲染FilterMore组件从filtersData中，获取数据（roomType，oriented，floor，characteristic），通过props传递给FilterMore组件

 // 父组件中渲染和处理FilterMore组件
  renderFilterMore = () => {
    const {
      openType
    } = this.state;
    if (openType === 'more') {
      console.log(this.filterData);
      const { roomType, oriented, floor, characteristic } = this.filterData;
      const data = { roomType, oriented, floor, characteristic }
      console.log('n-sel:', this.selectedValues[openType]);
      return <FilterMore
        data={data}
        value={this.selectedValues[openType]}
        onOk={this.onOk}
        onCancel={this.onCancel}
      />
    }
    return null
  }

// 设置选中值状态
  state = {
    selected: this.props.value
  }

  // 获取选中数据
  handlerSel = (val) => {
    const { selected } = this.state;
    const newSelected = [...selected]
    // 没有该值，新增（高亮显示）
    let index = newSelected.indexOf(val);
    if (index < 0) {
      newSelected.push(val)
    } else {
      //有，删除（取消高亮）
      newSelected.splice(index, 1)
    }
    console.log('选中：', newSelected);
    this.setState({
      selected: newSelected
    })
  }

  // 渲染标签
  renderFilters(data) {
    // 高亮类名： styles.tagActive
    // return (
    //   <span className={[styles.tag, styles.tagActive].join(' ')}>东北</span>
    // )
    const { selected } = this.state;
    return data.map((item) => <span
      onClick={() => this.handlerSel(item.value)}
      key={item.value}
      className={[styles.tag, selected.includes(item.value) ? styles.tagActive : ''].join(' ')}>
      {item.label}

2.获取房屋列表，封装筛选条件对象，根据筛选对象获取到房屋列表数据，将数据返回到条件找房界面，在条件找房界面使用HouseItem组件渲染房屋列表数据在页面中

 // 处理后台需要的筛选条件数据，组装起来
  handlerFilters = (selectedValues) => {
    // 筛选条件数据
    const { area, mode, price, more } = selectedValues;
    // 组装数据
    const filters = {};
    // area | subway
    let areaKey = area[0], aval;
    if (area.length === 2) {
      aval = area[1]
    } else {
      if (area[2] !== 'null') {
        aval = area[2]
      } else {
        aval = area[1]
      }
    }
    filters[areaKey] = aval;
    // mode
    filters.rentType = mode[0]
    // price
    filters.price = price[0]
    // more
    filters.more = more.join(',')
    console.log('filters:', filters);
    return filters
  }

　加载传输的数据，传入HouseItem组件进行渲染

  // 加载房屋列表数据
  getHouseList = async () => {
    // 加载提示
    // 第二个参数为0，不自动关闭
    // Toast.loading('加载中...', 0)
    let res = await getHouseByFilters(this.cityId, this.filters, 1, 20);
    console.log(res);
    // 调用hide关闭
    // Toast.hide();
    const { list, count } = res.data;
    if (count !== 0) {
      Toast.success(`获取到${count}条房源信息`, 2)
    }
    this.setState({
      list,
      count
    })
  }

  // 渲染列表项
  renderHouseItem = ({
    key, // Unique key within array of rows
    index, // Index of row within collection
    isScrolling, // The List is currently being scrolled
    isVisible, // This row is visible within the List (eg it is not an overscanned row)
    style, // Style object to be applied to row (to position it)
  }) => {
    const { list } = this.state
    const item = list[index]
    // 处理暂时没有加载到数据情况
    if (!item) {
      return (
        <div style={style} key={key}>
          <p className={styles.loading}></p>
        </div>
      )
    };
    // console.log(this.props.history)
    // 处理图片地址
    item.src = BASE_URL + item.houseImg;
    // console.log(item);
    return <HouseItem {...item} key={key} onClick={() => { this.props.history.push({ pathname: `/detail/${item.houseCode}` }, { id: item.houseCode }) }} style={style} />
  }

HouseItem组件

function HouseItem({ src, title, desc, tags, price, onClick, style }) {
  return (
    <div className={styles.house} onClick={onClick} style={style}>
      <div className={styles.imgWrap}>
        <img className={styles.img} src={src} alt="" />
      </div>
      <div className={styles.content}>
        <h3 className={styles.title}>{title}</h3>
        <div className={styles.desc}>{desc}</div>
        <div>
          {/* ['近地铁', '随时看房'] */}
          {tags.map((tag, index) => {
            const tagClass = 'tag' + (index + 1)
            return (
              <span
                className={[styles.tag, styles[tagClass]].join(' ')}
                key={tag}
              >
                {tag}
              </span>
            )
          })}
        </div>
        <div className={styles.price}>
          <span className={styles.priceNum}>{price}</span> 元/月
        </div>
      </div>
    </div>
  )
}

在将加载出的列表使用List组件渲染数据，InfiniteLoader滚动房屋列表时候，动态加载更多房屋数据

 // 渲染列表
  renderHouseList = () => {
    const { count } = this.state;
    // 没有数据渲染NoHouse组件
    return count === 0 ? this.renderNoHouse() : (
      <InfiniteLoader
        isRowLoaded={this.isRowLoaded}
        loadMoreRows={this.loadMoreRows}
        // 远程数据总条数
        rowCount={this.state.count}
      >
        {({ onRowsRendered, registerChild }) => (
          <AutoSizer>
            {({ height, width }) => (
              <List
                className={styles.houseList}
                height={height}
                rowCount={this.state.count}
                rowHeight={130}
                rowRenderer={this.renderHouseItem}
                onRowsRendered={onRowsRendered}
                ref={registerChild}
                width={width}
              />
            )}
          </AutoSizer>
        )}
      </InfiniteLoader>
    )
  }

这篇关于React+AntdUi实现《好客租房系统》条件找房界面04的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

React+AntdUi实现《好客租房系统》条件找房界面04

相关编程文章