点击取消按钮高亮

// 点击取消按钮高亮
handleClose = (type) => {
  // 控制弹窗的关闭操作，并且处理菜单的高亮
  // 判断当前的菜单是否应该高亮：依据就是是否选中了值
  let { menuStatus, menuValue } = this.state
  // 复制一份默认状态
  let newMenuStatus = {...menuStatus}
  // 当前的菜单值
  let v = menuValue[type]
  // 判断标题菜单是否选中：与默认数据对比
  if (type === 'area' && (v.length === 3 || v[0] !== 'area')) {
    // 区域筛选 高亮
    newMenuStatus[type] = true
  } else if (type === 'mode' && v[0] !== 'null') {
    // 方式筛选 高亮
    newMenuStatus[type] = true
  } else if (type === 'price' && v[0] !== 'null') {
    // 租金筛选 高亮
    newMenuStatus[type] = true
  } else if (type === 'more' && v.length !== 0) {
    // 第四项筛选 高亮
    // 后面实现了 FilterMore 组件后，再补充
    newMenuStatus[type] = true
  } else {
    // 不高亮
    newMenuStatus[type] = false
  }
  this.setState({
    openType: '',
    menuStatus: newMenuStatus
  })
}

点击确定按钮高亮

// 点击确定按钮高亮
onSave = (v, type) => {
  // 点击下拉列表的确定按钮触发
  // Filter -> FilterPicker -> FilterFooter
  // 把列表选中的值进行存储
  // -------------------------------
  // this.setState({
  //   menuValue: {
  //     ...this.state.menuValue,
  //     [type] : value
  //   }
  // })
  // --------------------------------
  // 先复制一份原始的数据
  let { menuStatus, menuValue } = this.state
  let mvalue = {...menuValue}
  let newMenuStatus = {...menuStatus}
  // 判断相应菜单是否选中
  if (type === 'area' && (v.length === 3 || v[0] !== 'area')) {
    // 区域筛选 高亮
    newMenuStatus[type] = true
  } else if (type === 'mode' && v[0] !== 'null') {
    // 方式筛选 高亮
    newMenuStatus[type] = true
  } else if (type === 'price' && v[0] !== 'null') {
    // 租金筛选 高亮
    newMenuStatus[type] = true
  } else if (type === 'more' && v.length !== 0) {
    // 第四项筛选 高亮
    // 后面实现了 FilterMore 组件后，再补充
    newMenuStatus[type] = true
  } else {
    // 不高亮
    newMenuStatus[type] = false
  }
  mvalue[type] = v
  this.setState({
    menuValue: mvalue,
    menuStatus: newMenuStatus,
    openType: ''
  })
}

封装通用的状态判断逻辑

checkStatus = (type, v, newMenuStatus) => {
    // 封装通用的状态判断逻辑
    if (type === 'area' && (v.length === 3 || v[0] !== 'area')) {
      // 区域筛选 高亮
      newMenuStatus[type] = true
    } else if (type === 'mode' && v[0] !== 'null') {
      // 方式筛选 高亮
      newMenuStatus[type] = true
    } else if (type === 'price' && v[0] !== 'null') {
      // 租金筛选 高亮
      newMenuStatus[type] = true
    } else if (type === 'more' && v.length !== 0) {
      // 第四项筛选 高亮
      // 后面实现了 FilterMore 组件后，再补充
      newMenuStatus[type] = true
    } else {
      // 不高亮
      newMenuStatus[type] = false
    }
  }