使用开关设置ReactJS状态的替代方案

Question

我在React中制作了一个隐藏过滤器的函数。我在一个容器组件中有多个过滤器组件，每个过滤器组件都有相应的状态来添加一个隐藏/显示css类。

我想知道是否有人知道更好的方法来编程这个函数，因为用这种方式编程感觉有点乏味。。

hideFilters(clickedFilter){
switch(clickedFilter.toLowerCase()){
case "assortiment":
this.setState({
"assortiment": "show",
"taal":"hide",
"bestelbaar":"hide",
"verschijningsjaar":"hide",
"verschijningsvorm":"hide",
"nur":"hide"
});
break;
case "bestelbaar":
this.setState({
"bestelbaar":"show",
"assortiment": "hide",
"taal":"hide",
"verschijningsjaar":"hide",
"verschijningsvorm":"hide",
"nur":"hide"
});
break;
case "taal":
this.setState({
"taal":"show",
"assortiment": "hide",
"bestelbaar":"hide",
"verschijningsjaar":"hide",
"verschijningsvorm":"hide",
"nur":"hide"
});
break;
case "verschijningsvorm":
this.setState({
"verschijningsvorm":"show",
"assortiment": "hide",
"bestelbaar":"hide",
"verschijningsjaar":"hide",
"taal":"hide",
"nur":"hide"
});
break;
case "verschijningsjaar":
this.setState({
"verschijningsjaar":"show",
"assortiment": "hide",
"bestelbaar":"hide",
"verschijningsvorm":"hide",
"taal":"hide",
"nur":"hide"
});
break;
default:  console.log('hi')
}
}

Answer 1

this.defaultStates = {
"assortiment": "hide",
"taal":"hide",
"bestelbaar":"hide",
"verschijningsjaar":"hide",
"verschijningsvorm":"hide"
}
hideFilters(clickedFilter){
this.setState({
...this.defaultStates,
[clickedFilter.toLowerCase()]: "show"
})
}