使用React未选中复选框输入后获取初始状态

时间:2018-06-21 09:04:12

标签: javascript arrays reactjs

我正在建立一个过滤器部分,在这里我将通过API提取数据并设置一个新状态“ [结果]”。该过程非常简单,因为数据是在点击事件和特定条件下获取的。数据存储在数组中,因为用户能够过滤选中的多个输入。

我的目标是在取消选中复选框输入时删除特定索引,如果数组为空,则将状态重置为首次加载页面时获取的数据。

我听说lodash可以帮助我构建功能,尽管我不知道如何在我的react-app上实现。

我如何建立这个过程?

这是我的代码:

handleFilterButtons = event => {
var filterIcons = event.target.getAttribute("name");
var valueInput = event.target.value;
var apiFilters = `https://backend.greatsaigon.com/api/v1/en/directories/${
  this.state.directory
}/venues`;
axios
  .get(apiFilters)
  .then(response => {
    let result;
    let prevResult = [];
    let toggleButton;

    response.data.forEach(req => {
      if (filterIcons === "Hair") {
        if (req.options.beauty.hair.treatment !== "0") {
          req.options.beauty.hair.treatment.forEach(res => {
            if (res === valueInput && toggleButton !== undefined) {
              result = req;
              this.state.stockResult.unshift(result);
            }
          });
        }
      } else if (filterIcons === "Nails") {
        if (req.options.beauty.nails.treatment !== "0") {
          req.options.beauty.nails.treatment.forEach(res => {
            if (res === valueInput) {
              result = req;
              this.state.stockResult.unshift(result);
            }
          });
        }
      } else if (filterIcons === "Spa & Massage") {
        if (req.options.beauty.spa.treatment !== "0") {
          req.options.beauty.spa.treatment.forEach(res => {
            if (res === valueInput) {
              result = req;
              this.state.stockResult.unshift(result);
            }
          });
        }
      }
    });

    this.setState({
      result: _.uniq(this.state.stockResult),
      isToggle: toggleButton
    });
  })
  .catch(function(error) {
    console.log(error);
  });

};

0 个答案:

没有答案