时间戳

首页 > 解决方案 > 如何根据复选框/框状态更改 URL 正文？

javascript - 如何根据复选框/框状态更改 URL 正文？

问题描述

在我的React/JS项目中，用户检查用户想要查看该类型数据的 3 个选项中的一个或多个。这些数据类型是final、generation和availability。所有这 3 种数据类型都有不同的 url。我需要发送请求这些在表单中选中的数据类型，我不会将请求发送给未选中的。我需要一个逻辑来检查哪个被选中，哪个未被选中。我将这些数据类型状态保存在一个名为datatypes的数组中，如下所示。

  {
    "id":"final",
    "isChecked": false
  },
  {
    "id":"generation",
    "isChecked": false
  },
  {
    "id":"availability",
    "isChecked": false
  }
]

我正在更改 isChecked 属性的状态为真或假。最后，我需要进行检查并发送isChecked= true的请求。但我不想像这样做这个操作：

**if**(datatypes[0].isChecked===**true** && datatypes[1].isChecked===**true** && datatypes[0].isChecked===**true**){

//request for 3 of data type

}
**else if**(datatypes[0].isChecked===**true** && datatypes[1].isChecked===**true** && datatypes[0].isChecked===**false**){

//request for first two data type(final, generation) and not for the 3. one 

}
**else if**()...

这完全不是进行此检查的正确方法。那么对于这种情况，最好的和简短的逻辑是什么？对于每一个帮助和建议，我都会非常感激，谢谢 :)

标签： javascriptreactjstypescriptif-statement

解决方案

我想您是在询问如何将可能性列表过滤到仅包含已检查选项的可操作列表中。这基本上是一个过滤器然后映射操作，如下所示。

const possibilities = [
  {
    "id":"final",
    "isChecked": false
  },
  {
    "id":"generation",
    "isChecked": false
  },
  {
    "id":"availability",
    "isChecked": false
  }
]

// if you need to do a single request for each checked option
function doMyRequest(option: string) {
  ...your request code here
}
possibilities
  .filter(possibility => possibility.isChecked)
  .forEach(possibility => doMyRequest(possibility));

// or if you need to do one request with all checked options
function doMyRequest(options: string[]) {
  ...your request code here
}

doMyRequest(
  possibilities
    .filter(possibility => possibility.isChecked)
    .map(possibility => possibility.id)
);

推荐阅读