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

本文主要是介绍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的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！