Reactjs 使用React.js实现Shuffle.js

我正试图用react.js激活shuffle.js组件功能（搜索、筛选和排序）。然而，网站上的文档非常有限。我知道我需要添加一个搜索输入和一些按钮来做我想做的事情，但是我不知道如何连接我的搜索框输入和其他按钮事件来操纵react渲染的photogrid（或容器中的其他元素）

我已经导入了shuffle.js作为节点模块，并在react页面上对其进行了初始化。他们提供的基本代码似乎正在工作，并显示照片网格，然而，基本上就是这样。我还想实现搜索、过滤和排序功能，但react.js中没有关于如何实现这一功能的文档。下面的代码显示了photogrid的实现，但没有其他内容

import React，{Component}来自“React”；
从“shufflejs”导入洗牌；
类PhotoGrid扩展了React.Component{
建造师（道具）{
超级（道具）；
常量灰度像素='数据：image/gif；base64，r0lgodlhaqabaaamlcwgaaach5baaaaaaaaaaaaaaaaaaaaaaicraaow='；
const blackPixel='数据：image/gif；base64，r0lgodlhaqabaaaauebaaacwaaaqaabaakqbads='；
const greenPixel='数据：图像/png；base64，IVBORW0KggoaaaansuhueugaaaaaaaabcayaaffcsjaaaaduleqVR42MO02VZ4HWAE9ACLCLBN6AaabJRU5ERKJGGG='；
此.state={
照片：[{
id:4，
src：灰度像素
},
{
id:5，
src:blackPixel
},
{
id:6，
绿色像素
},
],
搜索词：“”，
sortByTitle:“，
sortByDate:“”，
sortByPopularity:“，
筛选器类别：“”
};
这是一个过滤器={
第1类：[]，
第二类：[]，
};
this.wb=this.props.dataWB；
this.element=React.createRef（）；
this.sizer=React.createRef（）；
this.\u handleSearchKeyup=this.\u handleSearchKeyup.bind（this）；
this.\u handleSortChange=this.\u handleSortChange.bind（this）；
this.\u handleCategory1Change=this.\u handleCategory1Change.bind（this）；
this.\u handleCategory2Change=this.\u handleCategory2Change.bind（this）；
this.\u getCurrentCat1Filters=this.\u getCurrentCat1Filters.bind（this）；
this.\u getCurrentCat2Filters=this.\u getCurrentCat2Filters.bind（this）；
}
/**
*伪造和API请求一组图像。
*@return{Promise}用对象数组解析的承诺。
*/
_获取照片（）{
返回新承诺（（解决）=>{
设置超时（（）=>{
决心([{
id:4，
用户名：'@stickmule'，
标题:"猫",，
创建日期：“2003-09-01”，
人气：'233'，
类别1:“动物”，
类别2:‘哺乳动物’，
名称：“贴纸骡子”，
src:'https://images.unsplash.com/photo-1484244233201-29892afe6a2c?ixlib=rb-0.3.5&q=80&fm=jpg&crop=熵&cs=tinysrgb&w=800&h=600&fit=crop&s=14d236624576109b51e85bd5d7ebfbfc'
},
{
id:5，
用户名：“@prostoroman”，
创建日期：“2003-09-02”，
人气:"232",，
类别1:“工业”，
类别2:‘哺乳动物’，
标题:"城市",，
名称：“罗马Logov”，
src:'https://images.unsplash.com/photo-1465414829459-d228b58caf6e?ixlib=rb-0.3.5&q=80&fm=jpg&crop=熵&cs=tinysrgb&w=800&h=600&fit=crop&s=7a7080fc0699869b1921cb1e7047c5b3'
},
{
id:6，
用户名：'@richienolan'，
创建日期：“2003-09-03”，
人气:"231",，
标题:"自然",，
类别1:“艺术”，
类别2:‘昆虫’，
姓名：“理查德·诺兰”，
src:'https://images.unsplash.com/photo-1478033394151-c931d5a4bdd6?ixlib=rb-0.3.5&q=80&fm=jpg&crop=熵&cs=tinysrgb&w=800&h=600&fit=crop&s=3c74d594a86e26c5a319f4e17b36146e'
}
]);
}, 300);
});
}
_照片加载时（照片）{
返回Promise.all（photos.map）（photo=>newpromise（（resolve）=>{
const image=document.createElement（'img'）；
image.src=photo.src；
如果（image.naturalWidth>0 | | image.complete）{
决议（照片）；
}否则{
image.onload=（）=>{
决议（照片）；
};
}
})));
}
_手动变速箱（evt）{
var value=evt.target.value.toLowerCase（）；
功能sortByDate（元素）{
return元素.getAttribute（'data-created'）；
}
功能sortByPopularity（元素）{
return元素.getAttribute（'data-popularity'）；
}
函数sortByTitle（元素）{
return元素.getAttribute（'data-title'）.toLowerCase（）；
}
让选择；
如果（值==“创建日期”）{
选项={
相反：是的，
作者：sortByDate，
};
}else if（值=='title'）{
选项={
作者：sortByTitle，
};
}else if（值=‘流行度’）{
选项={
相反：是的，
作者：sortByPopularity，
};
}else if（值==“默认值”）{
this.shuffle.filter（'all'）；
}否则{
选项={}；
}
this.shuffle.sort（选项）；
};
_getCurrentCat1Filters=函数（）{
返回此.filters.cat1.filter（函数（按钮））{
return按钮.classList.contains（'active'）；
}).map（功能（按钮）{
console.log（'button-value:'+button.getAttribute（'data-value'））
return按钮.getAttribute（'data-value'）；
});
};
_getCurrentCat2Filters=函数（）{
返回此.filters.cat2.filter（函数（按钮））{
return按钮.classList.contains（'active'）；
}).map（功能（按钮）{
console.log（'button-value:'+button.getAttribute（'data-value'））
//console.log（'button-value:'+button.getAttribute（'data-value'））
return按钮.getAttribute（'data-value'）；
});
};
_handleCategory1Change=功能（evt）{
var按钮=evt.currentTarget；
控制台日志（按钮）
//
_handleSearchKeyup(event){
   this.setState({searchTerm : event.target.value}, () => {
     this.shuffle.filter((element) => { /* use this.state.searchTerm to return matching elements */ } );
  })
 }

_handleSearchKeyup(event){
  this.setState({searchTerm : event.target.value.toLowerCase()}, () => {
    this.shuffle.filter((element) => {
      return ( 
        element.dataset.name.toLowerCase().includes(this.state.searchTerm) || 
        element.dataset.username.toLowerCase().includes(this.state.searchTerm)
       );
     })
  })
}

function PhotoItem({ id, src, name, username }) {
  return (
       <div key={id} 
            className="col-md-3 photo-item" 
            data-name={name} 
            data-username={username}>
            <img src={src} style={{width : "100%",height :"100%"}}/>
       </div>
  )
}

_handleSearchKeyup(event){
   this.searchTerm = event.target.value;
   this.shuffle.filter((element) => { /* use this.searchTerm to return matching elements */ } );
}

this.reverse = true; // in constructor
this.orderBy = null;

_handleSortOrderChange = () => {
  this.reverse = !this.reverse
  // call common sorting function
  // extracted from _handleSortChange
  // this._commonSortingFunction()
}

_handleSortByChange = (evt) => {
  this.orderBy = evt.target.value.toLowerCase();
  // call common sorting function
  // extracted from _handleSortChange
  // this._commonSortingFunction()
}

_commonSortingFunction = () => {
  // you can declare sorting functions in main/component scope
  let options = { reverse: this.reverse }      
  const value = this.orderBy;
  if (value == 'date-created') {
    options.by = sortByDate // or this.sortByDate
  } else if (value == 'title') {
    options.by = sortByTitle
  //...
  //this.shuffle.sort(options);

<button onClick={this._handleSortOrder}>Reverse order</button>