我有一个电子商务项目和过滤器页面。在过滤器页面中,我有一些带有复选框输入的品牌,可以在选中复选框时按品牌进行过滤。当品牌输入选中时,我会操纵用于保存选中品牌的网址,以防页面重新加载(http://localhost:3000/product-list?categories=2&brands=1,12)。 我的问题是当我用 12 号检查我的品牌时,同时检查了 1 号和 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);
答案 0 :(得分:0)
我需要在 (function propValue) 的 ... 中添加新函数并在 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;
}