如何在 SearchKit 中強制更改查詢？

Question

我們正在嘗試使用復選框創建一個默認選中所有項目的 RefinementListFilter，當用戶取消選中所有項目時，所有項目都會自動選中。 我們完成了類似的事情，但它有問題（對不起，如果代碼感覺難看，它是 WIP）：

在渲染代碼中

<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} />
  );
};

我們試圖避免的是上面代碼中的TODO注釋。

我認為SearchKit的文檔並不完整。 我找不到如何做到這一點。

我嘗試和工作的是通過更改瀏覽器的 URL（設置location.href ）來更改查詢，但是頁面的重新加載非常難看，並且與頁面其余部分的行為不匹配。

如果我沒有得到任何答案，我唯一可以嘗試的就是閱讀三個演示的源代碼，然后閱讀 SearchKit 的源代碼。

帶有相關文件的 Git 存儲庫是 OSS。

沒有錯誤消息。

謝謝你。

Answer 1

可行的解決方案，在查看 SearchKit 源代碼后（是的，第一行是一個全局變量，我將來可能會將其更改為其他內容）：

let globalSearchKitManagers = [];

...

for (const sk of globalSearchKitManagers) {
  if (typeof sk !== 'undefined') {
    const filters = sk.accessors.accessors.filter(
      (x) => x.field === '_type',
    );
    for (const x of filters) {
      sk.removeAccessor(x);
    }
    sk.performSearch(true, true);
  }
}

...

React.useEffect(() => {
  globalSearchKitManagers.push(searchkit);
  return () => {
    globalSearchKitManagers.splice(
      globalSearchKitManagers.indexOf(searchkit),
      1,
    );
  };
}, [searchkit]);

更新：我們現在使用SearchkitComponent而不是上面代碼片段中的全局變量。