代码之家 › 专栏 › 技术社区 › Elvira

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

state switch-statement reactjs javascript

Elvira · 技术社区 · 6 年前

我在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')
  }
}

1 回复 | 直到 6 年前

Sagar Jajoriya 6 年前

this.defaultStates = {
  "assortiment": "hide",
  "taal":"hide",
  "bestelbaar":"hide",
  "verschijningsjaar":"hide",
  "verschijningsvorm":"hide"
}

hideFilters(clickedFilter){
  this.setState({
    ...this.defaultStates,
    [clickedFilter.toLowerCase()]: "show"
  })
}

推荐文章

zuZuu · React Redux-无法设置未定义的属性(设置“value”)

3 年前

john4ster · 对父级不更改状态的响应回调

3 年前

noiseymur · TypeError:useState不是函数或其返回值不可编辑

3 年前

Dylan L. · 为什么更新的状态没有返回到我的组件?

3 年前

Ram John · 如何更新字符串的previewState并保留最后一个值

3 年前

kuk · 如何在React中回调后动态更改状态的对象值?

3 年前

Rodrigo Gil · React JS:更新父组件时子组件的状态更改

3 年前

Tú Nguyá»n · 更新状态时,我的输入没有更新值

3 年前

Samuel Zrna · 如何在React TS中为对象(地图数据结构)中的每个项目呈现自定义元素?

3 年前

Lucio Zenir · 如何使用材质UI在react上动态创建选择和状态?

7 年前