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"
  })
}

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

1 个答案: