筛选条件栏-标题高亮-通过点击事件控制 & 父组件提供标题的状态数据 & …-解构对象
标题高亮控制
- 高亮状态位显示控制
- 父组件提供标题的状态数据
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)
}}>
效果同上
点击高亮,点击变灰