列表找房（二）02-筛选条件栏-标题高亮-通过点击事件控制 & 父组件提供标题的状态数据 & ...-解构对象

筛选条件栏-标题高亮-通过点击事件控制 & 父组件提供标题的状态数据 & …-解构对象

标题高亮控制

• 高亮状态位显示控制
  • 父组件提供标题的状态数据

this.state = {
  menuStatus: {
    area: false,
    mode: true,
    price: false,
    more: false
  }
}

// 条件筛选栏标题数组：
const titleList = [
  { title: '区域', type: 'area' },
  { title: '方式', type: 'mode' },
  { title: '租金', type: 'price' },
  { title: '筛选', type: 'more' }
]
export default function FilterTitle(props) {
  let menuStatus = props.menuStatus
  let titleTags = titleList.map(item => {
    // 根据type获取菜单状态值
    let status = menuStatus[item.type]
    // 条件选中的类名
    let selectClass = [styles.dropdown, styles.selected].join(' ')
    return (
      <Flex.Item key={item.type}>
        <span className={status? selectClass: ''}></span>
      </Flex.Item>
    )
  })
}

筛选条件状态显示控制-效果

• 高亮控制事件

changeStatus = (type) => {
    // 修改菜单状态
    console.log('菜单类型' + type)
    let obj = {...this.state.menuStatus}
    obj[type] = true
    this.setState({
      menuStatus: obj
    })
    // this.setState({
    //   menuStatus: {
    //     ...this.state.menuStatus,
    //     [type]: true
    //   }
    // })
}

• 父组件属性传递

<FilterTitle changeStatus={this.changeStatus} menuStatus={this.state.menuStatus}/>

• 标题组件接收属性

export default function FilterTitle(props) {
  let { menuStatus, changeStatus } = props

• 标题组件触发事件

<span className={cls} onClick={() => {
  // 单击时控制菜单选中,控制父组件menuStatus状态变化
  changeStatus(item.type)
}}>

效果同上

点击高亮，点击变灰