16.react---条件筛选组件封装

FilterTitle组件

1.使用map遍历展示条件筛选的title，然后通过父组件传值false、true来展示高亮效果

2.子组件调用父组件的onClick传type给父组件

//父组件更新状态值
const newSelectedValues = {
      ...this.state.selectedValues,
      // 只更新当前 type 对应的选中值
      [type]: value
    }

import React from 'react'

import { Flex } from 'antd-mobile'

import styles from './index.module.css'

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

/* 
  1 通过 props 接收，高亮状态对象 titleSelectedStatus。
  2 遍历 titleList 数组，渲染标题列表。
  3 判断高亮对象中当前标题是否高亮，如果是，就添加高亮类。

  4 给标题项绑定单击事件，在事件中调用父组件传过来的方法 onClick。
  5 将当前标题 type，通过 onClick 的参数，传递给父组件。
  6 父组件中接收到当前 type，修改该标题的选中状态为true。
*/

export default function FilterTitle({ titleSelectedStatus, onClick }) {
  return (
    <Flex align="center" className={styles.root}>
      {titleList.map(item => {
        // 通过父组件传值判断是否要显示高亮
        const isSelected = titleSelectedStatus[item.type]
        return (
          <Flex.Item key={item.type} onClick={() => onClick(item.type)}>
            {/* 选中类名： selected */}
            <span
              className={[
                styles.dropdown,
                isSelected ? styles.selected : ''
              ].join(' ')}
            >
              <span>{item.title}</span>
              <i className="iconfont icon-arrow" />
            </span>
          </Flex.Item>
        )
      })}
    </Flex>
  )
}

FilterPicker组件

1.父组件定义一个变量openType让其等于'area' 、'mode' 、'price'去展示筛选组件

2.父组件定义取消方法和保存方法进行关闭遮罩层和筛选组件

//解构父组件的值和方法，传给孙组件
const { onCancel, onSave, type } = this.props
//将确定和取消按钮封装成全局组件
<FilterFooter
          onCancel={() => onCancel(type)}
          onOk={() => onSave(type, value)}
        />