过滤器中的反应复选框冲突

Question

我有一个电子商务项目和过滤页面。在过滤器页面中，我有几个带有复选框输入的品牌，以便在选中复选框时按品牌过滤。当检查品牌输入时，我会操纵用于保存检查品牌的 url，以防页面重新加载，例如 (http://localhost:3000/product-list?categories=2&brands=1,12)。 我的问题是当我用 id 12 检查我的品牌时，id 1 和 id 2 品牌也检查了。

我的复选框组件

import React from "react";
import "./CheckBox.style.scss";
import { withRouter } from "react-router-dom";

class CheckBox extends React.Component {
  constructor(props) {
    super(props);
    this.checkboxRef = React.createRef();
  }

  componentDidUpdate(prevProps) {
    if (
      this.props.location.search !== prevProps.location.search &&
      this.checkCategoryChanges(
        this.props.location.search,
        prevProps.location.search
      ) &&

      
      this.checkboxRef.current.checked
    ) {
      this.checkboxRef.current.checked = false;
    }
  }

  checkCategoryChanges(currentUrl, prevUrl) {
    let items =
      currentUrl.charAt(0) === "?"
        ? currentUrl.slice(1).split("&")
        : currentUrl.split("&");

    for (const item of items) {
      if (
        (item.indexOf("categories") !== -1 && prevUrl.indexOf(item) === -1) ||
        (item.indexOf("categories") !== -1 && items.length === 1)
      ) {
        return true;
      }
    }
    return false;
  }

  isChecked() {
    const mainUrlAsArray = window.location.href.split("?");
    if (mainUrlAsArray.length === 2) {
      const url = mainUrlAsArray[1];
      let checkedItems =
        url.charAt(0) === "?" ? url.slice(1).split("&") : url.split("&");

      for (const item of checkedItems) {
        if (
          item.indexOf(this.props.urlKey) !== -1 &&
          item.split("=")[1].indexOf(this.props.value) !== -1 
        ) {
          return true;
        }
      }
      return false;
    }
  }

  runOnChange(e) {
    const checkboxData = {
      value: this.props.value,
      urlKey: this.props.urlKey,
      isChecked: e.target.checked,
      type: this.props.type ? this.props.type : "checkbox",
    };
    this.props.onChange(checkboxData);
  }

  render() {
    return (
      <label className="checkbox-group">
        <input
          ref={this.checkboxRef}
          defaultChecked={this.isChecked() ? true : undefined}
          value={this.props.value}
          onClick={(e) => this.runOnChange(e)}
          type={this.props.type ? this.props.type : "checkbox"}
          className="checkbox"
          name={this.props.name}
        />
        <span className="checkBoxLabel">{this.props.text}</span>
      </label>
    );
  }
}

export default withRouter(CheckBox);

Answer 1

我只需要在 (function propValue) 的 for ... 中添加新函数，并在 if 语句 && item.split("=")[1].split(",").some(propsValue)

中添加新条件

isChecked(e) {
        if (this.props.isChecked) {
          if (e.checkboxRef.current && e.checkboxRef.current.checked === false) {
            // e.checkboxRef.current.checked = true;
            this.runOnChange(true);
            return true;
          }
        }
        const url = window.location.href.split("?")[1];
        if (url) {
          let checkedItems =
            url.charAt(0) === "?" ? url.slice(1).split("&") : url.split("&");
    
          for (const item of checkedItems) {
            //check only selected values
            const propsValue = () => {
              return item.split("=")[1].split(",").find(item => item == this.props.value)
            }
            if (
              item.indexOf(this.props.urlKey) !== -1 &&
              item.split("=")[1].indexOf(this.props.value) !== -1 &&
              item.split("=")[1].split(",").some(propsValue) //added new line
    
            ) {
              return true;
            }
          }
        }
    
        return false;
      }