![](/img/trans.png)
[英]Javascript anonymous functions with parameters. Where are those parameters defined?
[英]Only filter Array for the defined parameters. ignore empty parameters
我有一系列项目,可以通过三个选择下拉列表进行过滤。 一旦用户选择了一个选项,该选项将以组件状态通过商店传递。 我只是不知道如何处理其中一个过滤器选项为空并且传递了一个空过滤器选项的情况。 我也想有选择显示全部而忽略过滤器。 我只是使or逻辑能够像只能过滤多年,如果我过滤位置或类型,那么已经设置的年份将被忽略,但我也想过滤所有这三个。
export class Projects extends React.Component {
constructor(props) {
super(props);
autoBind(this);
this.state = {
initialItems: props.data.projects.edges,
items: null,
filterPlace: '',
filterYear: '',
filterType: '',
};
this.placesOptions = new Set();
this.yearsOptions = new Set();
this.typesOptions = new Set();
}
componentWillMount(){
const { initialItems } = this.state
this.setState({items: initialItems})
initialItems.map((item) => {
this.placesOptions.add(item.node.categories_names[0].name)
this.yearsOptions.add(item.node.categories_names[1].name)
this.typesOptions.add(item.node.categories_names[2].name)
})
}
// TODO: FIX BUG ON RELOAD ALL EMPTY
componentDidUpdate(prevProps) {
if (prevProps !== this.props) {
this.filterProjects()
}
}
filterProjects(){
const { filterPlace, filterYear, filterType } = this.props;
let updatedList = this.state.initialItems;
updatedList = updatedList.filter((item) => {
const itemFilterCategory = item.node.categories_names
const placeQueryString = itemFilterCategory[0].name.toString().toLowerCase()
const yearQueryString = itemFilterCategory[1].name.toString().toLowerCase()
const typeQueryString = itemFilterCategory[2].name.toString().toLowerCase()
return (
filterPlace !== "" && placeQueryString.search( filterPlace.toLowerCase()) !== -1 ||
filterYear !== "" && yearQueryString.search( filterYear.toLowerCase()) !== -1 ||
filterType !== "" && typeQueryString.search( filterType.toLowerCase()) !== -1
)
});
this.setState({items: updatedList});
}
render() {
const { location, data } = this.props;
const { items } = this.state;
const { page } = data;
return (
<MainLayout location={location}>
<TopNavigation />
<Header
siteBrand={config.siteBrand}
siteSubtitle={page.title}
isProjectArchive
/>
<ConnectedProjectFilter
changeHandlerSearch={(e) => this.searchProjects(e)}
placesOptions={this.placesOptions}
yearsOptions={this.yearsOptions}
typesOptions={this.typesOptions}
/>
<ProjectArchiveListing projects={items} />
</MainLayout>
)
}
}
const mapStateToProps = state => ({
filterPlace: state.filterPlace,
filterYear: state.filterYear,
filterType: state.filterType,
});
const mapDispatchToProps = dispatch => ({});
export default connect(
mapStateToProps,
mapDispatchToProps
)(Projects)
如果您希望任何空输入匹配(传递)每个项目,那么我相信这是您想要的条件:
(filterPlace === "" || placeQueryString.search( filterPlace.toLowerCase()) !== -1) &&
(filterYear === "" || yearQueryString.search( filterYear.toLowerCase()) !== -1) &&
(filterType === "" || typeQueryString.search( filterType.toLowerCase()) !== -1)
为了用语言描述它,您希望每个传递的项目对于每个过滤器都有效。 要使用过滤器进行验证,过滤器必须允许所有(为空),或者项目必须与过滤器匹配。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.