更新筛选菜单组件

更新筛选菜单组件的交互
This commit is contained in:
姜棚 2021-12-13 17:05:06 +08:00
parent 76b07a2974
commit 20049bd5cb
3 changed files with 18 additions and 4 deletions

View File

@ -11,7 +11,7 @@ import Menu from "../menu/main.js"
constructor(props) { constructor(props) {
super(props); super(props);
props.data.menuList[0].check = true;
this.state = { this.state = {
id:props.data.id, id:props.data.id,
@ -19,9 +19,10 @@ import Menu from "../menu/main.js"
selectedMenu: props.data.menuList[0], selectedMenu: props.data.menuList[0],
menuList:props.data.menuList, menuList:props.data.menuList,
visible:true, visible:true,
menuShow:false, menuShow:true,
} }
this.state.text = props.data.menuList[0].name; this.state.text = props.data.menuList[0].name;
} }
onHandlerClick(){ onHandlerClick(){
let isShow = !this.state.menuShow; let isShow = !this.state.menuShow;
@ -46,6 +47,16 @@ import Menu from "../menu/main.js"
onselectFn(e){ onselectFn(e){
} }
onClose(e,id){
this.props.onClose(e,this.state.id)
let menuList = _.map(this.state.menuList,(item)=>{
item.check = false;
return item
})
this.setState({menuList:menuList})
}
render() { render() {
return ( return (
<div className = "filterComponent"> <div className = "filterComponent">
@ -55,7 +66,7 @@ import Menu from "../menu/main.js"
<span className="filter-maohao">:</span> <span className="filter-maohao">:</span>
<span className="filter-placeholder">{this.state.text }</span> <span className="filter-placeholder">{this.state.text }</span>
<Icon type="down" className="icon-down-arrow"/> <Icon type="down" className="icon-down-arrow"/>
<Icon type="close" className="icon-del" onClick={(e)=>{this.props.onClose(e,this.state.id)}} /> <Icon type="close" className="icon-del" onClick={(e)=>{this.onClose(e,this.state.id)}} />
</span> </span>
</div> </div>

View File

@ -27,6 +27,8 @@ import FilterSelect from "../filterSelect/main.js"
onCloseSelect(e,id){ onCloseSelect(e,id){
this.removeItem(e,id); this.removeItem(e,id);
this.refs.menu.clearIndexCheck(id); this.refs.menu.clearIndexCheck(id);
this.props.onClose() this.props.onClose()
} }
//移除筛选项 //移除筛选项
@ -58,6 +60,7 @@ import FilterSelect from "../filterSelect/main.js"
this.removeItem(e,id) this.removeItem(e,id)
} }
this.setState({showItemList:this.state.showItemList}) this.setState({showItemList:this.state.showItemList})
this.setState({menuShow:false})
} }
onSelect(e){ onSelect(e){

View File

@ -16,7 +16,7 @@ import React from 'react'
} }
} }
clearAllCheck(){ clearAllCheck(){
} }
//清除指定选项 //清除指定选项
clearIndexCheck(id){ clearIndexCheck(id){