如何从 React(Typescript) 同位素布局中找到过滤后的项目数

Question

我正在使用 React(Typescript) 中的同位素布局库。我能够设法过滤页面中的工作。但我不确定如何 return 过滤项目计数。

在页面加载时，我正在初始化 Isotope。

useEffect(() => {  
    isotope.current = new Isotope(".iso-filter-container", {
      itemSelector: ".iso-filter-item",
      masonry: {
        columnWidth: 50,  
        gutter: 12        
      } ,   
    });   

    // cleanup
     return () => isotope.current?.destroy();
  }, [fullcatalog]);

onFilterChange 处理过滤器值并执行排列。

 const onFilterChange = (val : Types.SelectedFilterValue ) => {          
   var _str =  val.filterValue.map( x => ('(\|' + x + '\|)')).join('|');

   var filterFns = { 
      //match
      matches: function(itemelement : Element) {
        if(itemelement != null) {
          try{
            var strTarget : string  = itemelement.getAttribute('data-' + val.filterType.toLowerCase()) ?? '';  
             return strTarget.match(new RegExp(_str, "i"));
          }catch(e) {
            console.log(e);
          }
        }     
      },  
  };

  // use matching filter function
  let pattern : any = filterFns['matches']  || '*';    
  isotope.current?.arrange({ filter: pattern });     
 };

同位素排列后，如何获取筛选项数？

Answer 1

isotope.current?.getFilteredItemElements().length 似乎返回过滤项目的长度。

如何从 React(Typescript) 同位素布局中找到过滤后的项目数

How to find the filtered items count from React(Typescript) isotope-layout

reactjs

typescript

jquery-isotope