Javascript 如何在SearchKit中强制更改查询？

我们正在尝试制作一个带有复选框的RefinementListFilter，默认情况下选中所有项目，当用户取消选中所有项目时，所有项目都会自动选中。我们完成了类似的工作，但存在问题（如果代码感觉不好，很抱歉，这是WIP）：

在渲染代码中

其他代码

/**
*返回与数据类型关联的标签
*@param{string}val
*/
常量值标签=（val）=>{
常数数据=[
{标签：'Documents'，值：'document'}，
{标签：'Links'，值：'link'}，
{标签：'Web Pages'，值：'article'}，
{标签：'物种信息'，值：'物种'}，
{标签：'栖息地类型信息'，值：'栖息地'}，
{标签：'Sites Info'，值：'site'}，
{label:'Protected Area'，value:'Protected_Area'}，//隐藏
];
返回数据.filter（（x）=>x.value==val）[0]。标签；
};
/**
*显示一个复选框，带有替换默认数据类型字符串的标签。
*@param{object}props
*/
常量优化选项=（道具）=>{
返回(
{}}
className={props.bemBlocks
1.选择权（）
.state（{selected:props.active}）
.mix（props.bemBlocks.container（'item'））}
tabIndex={0}
选中的aria={props.active}
>
{
返回props.onClick（…args）；
}}
选中={props.active}
className=“sk-item-list-option\uuuu复选框”
/>
{valueToLabel（props.label）}
{/*{props.count}*/}
);
};
/**
*在显示数据类型的筛选器之前，请对其选项进行良好排序，并选择默认值
*所有行为都要检查（这与所有行为都未检查时相同，
*因为隐式运算符是OR）。
*@param{object}props
*/
常量优化列表=（道具）=>{
常数数据=[
{顺序：1，键：'document'}，
{顺序：2，键：'link'}，
{顺序：3，键：'article'}，
{顺序：4，键：'物种'}，
{顺序：5，键：'栖息地'}，
{顺序：6，键：'site'}，
{顺序：7，键：'protected_area'}，//隐藏
];
让arr=[…props.items]；
arr=arr.filter（（x）=>x.key！=='protected_area'）；
arr=arr.sort（（a，b）=>{
console.log（'A'，A.key，'B'，B.key）；
const ai=data.findIndex（（x）=>x.key==a.key）；
const bi=data.findIndex（（x）=>x.key==b.key）；
如果（ai<0 | | isNaN（ai）| | bi<0 | | isNaN（bi））{
返回0；
}
返回数据[ai]。订单-数据[bi]。订单；
});
const allKeys=arr.map（（x）=>x.key）；
const activeCount=props.selectedItems.length；
让selectedItems=props.selectedItems.map（（x）=>x.key）；
如果（activeCount==0）{
selectedItems=所有键；
}否则{
selectedItems=props.selectedItems；
if（selectedItems.length==allKeys.length）{
selectedItems=[]；
//TODO:在“选定过滤器”视图中执行此操作，而不重新加载页面
const newLoc=window.location.href
.更换（/type\[\d+\]=[a-zA-Z0-9\]+/g'）
.替换（/&&/g，，&'））
.替换（/\？&/g，“？”）
.替换（/[&？]$/，''）；
if（newLoc！==window.location.href）{
window.location.href=newLoc；
}
}
}
返回(
);
};

我们试图避免的是上面代码中的

TODO

注释

在我看来，这是不完整的。我找不到该怎么做

我尝试并成功地通过更改浏览器的URL（设置

location.href

）来更改查询，但页面的重新加载非常糟糕，与页面其余部分的行为不匹配

如果我没有得到任何答案，我唯一可以尝试的就是阅读三个演示的源代码，然后阅读SearchKit的源代码

Git的回购协议是OSS

没有错误消息

---

谢谢。

工作解决方案，在查看SearchKit源代码后（是的，第一行是一个全局变量，我以后可能会将其更改为其他变量）：

让GlobalSearchKitManager=[]；

for（GlobalSearchKitManager的常数sk）{
if（sk的类型！=“未定义”）{
常量过滤器=sk.accessors.accessors.filter(
（x） =>x.field=='\u类型'，
);
用于（过滤器的常数x）{
sk.拆卸附件（x）；
}
sk.performSearch（真，真）；
}
}

React.useffect（（）=>{
globalSearchKitManagers.push（搜索工具包）；
return（）=>{
globalSearchKitManager.splice(
GlobalSearchKitManager.indexOf（searchkit），
1.
);
};
}，[searchkit]）；

更新：我们现在使用的是全局变量，而不是上面代码段中的全局变量

<RefinementListFilter
  id="type"
  title="By Type"
  field="_type"
  size={10}
  operator="OR"
  itemComponent={RefinementOption}
  listComponent={RefinementList}
/>

/**
 * Returns the label associated to a data type
 * @param {string} val
 */
const valueToLabel = (val) => {
  const data = [
    { label: 'Documents', value: 'document' },
    { label: 'Links', value: 'link' },
    { label: 'Web Pages', value: 'article' },
    { label: 'Species Info', value: 'species' },
    { label: 'Habitat Types Info', value: 'habitat' },
    { label: 'Sites Info', value: 'site' },
    { label: 'Protected Area', value: 'protected_area' }, // hidden
  ];
  return data.filter((x) => x.value === val)[0].label;
};

/**
 * Displays a checkbox w/ a label that replaces the default data type string.
 * @param {object} props
 */
const RefinementOption = (props) => {
  return (
    <div
      role="checkbox"
      onKeyPress={() => {}}
      className={props.bemBlocks
        .option()
        .state({ selected: props.active })
        .mix(props.bemBlocks.container('item'))}
      tabIndex={0}
      aria-checked={props.active}
    >
      <label style={{ flexGrow: 1 }}>
        <input
          type="checkbox"
          onClick={(...args) => {
            return props.onClick(...args);
          }}
          checked={props.active}
          className="sk-item-list-option__checkbox"
        />
        <span className={props.bemBlocks.option('text')}>
          {valueToLabel(props.label)}
        </span>
      </label>
      {/* <div className={props.bemBlocks.option('count')}>{props.count}</div> */}
    </div>
  );
};

/**
 * Before showing the data types' filter sort its options well and the default
 * behavior is to all be checked (this is the same as when all are unchecked,
 * because the implicit operator is OR).
 * @param {object} props
 */
const RefinementList = (props) => {
  const data = [
    { order: 1, key: 'document' },
    { order: 2, key: 'link' },
    { order: 3, key: 'article' },
    { order: 4, key: 'species' },
    { order: 5, key: 'habitat' },
    { order: 6, key: 'site' },
    { order: 7, key: 'protected_area' }, // hidden
  ];

  let arr = [...props.items];
  arr = arr.filter((x) => x.key !== 'protected_area');
  arr = arr.sort((a, b) => {
    console.log('A', a.key, 'B', b.key);

    const ai = data.findIndex((x) => x.key === a.key);
    const bi = data.findIndex((x) => x.key === b.key);
    if (ai < 0 || isNaN(ai) || bi < 0 || isNaN(bi)) {
      return 0;
    }

    return data[ai].order - data[bi].order;
  });

  const allKeys = arr.map((x) => x.key);
  const activeCount = props.selectedItems.length;
  let selectedItems = props.selectedItems.map((x) => x.key);
  if (activeCount === 0) {
    selectedItems = allKeys;
  } else {
    selectedItems = props.selectedItems;
    if (selectedItems.length === allKeys.length) {
      selectedItems = [];

      // TODO: do this in the selected filters view w/o reloading the page
      const newLoc = window.location.href
        .replace(/type\[\d+\]=[a-zA-Z0-9_]+/g, '')
        .replace(/&&/g, '&')
        .replace(/\?&/g, '?')
        .replace(/[&?]$/, '');
      if (newLoc !== window.location.href) {
        window.location.href = newLoc;
      }
    }
  }

  return (
    <CheckboxItemList {...props} items={arr} selectedItems={selectedItems} />
  );
};