微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

与生产者/使用者反应父组件中的过滤状态

如何解决与生产者/使用者反应父组件中的过滤状态

我有一个状态保存在文件Body中,该状态由直接子级WikiReference作为使用者使用。值作为道具传递给WikiReference的子组件。这些孩子之一需要能够将值传递回正文(或其他地方)以过滤WikiReference

中使用的数据集

我认为评论displayed here是前进的方向,但是我在思考如何实现过滤器时会遇到麻烦,例如单击位于一个组件中,而过滤位于另一个组件中。

change = (e) => {
   return this.state.tree.filter(item => item.fileType === e.target.value)
}

enter image description here

Body.js

function Body() {
    const [searchState,setSearchState] = useState({
      searchCriteria: "",headers:[],references: []
    });

  return (

    <>
      <SearchContext.Provider value={{searchState,setSearchState}}>
          <Search />
          <WikiHeader />
          <WikiReference />
      </SearchContext.Provider>

    </>
  );
}

export default Body;

WikiReference.js返回部分

return (
  <>
  {

    references.map(reference => {
      console.log(reference);
      return(
        <div class="container">
          <Title title={reference.title} url={reference.url}/>
          <Domain domain={reference.domain}/>
          <Type type={reference.type}/>
          <IsGov isGov={reference.isGov} onClick={onClick}/>
        </div>
      );
    })
  }
  </>

);

Type.js

import React,{Component} from "react";
import "../../../App.css"

class Type extends Component {

switch(type){
  switch(type) {
    case 'article':
      return  <span><i  className="fa fa-file-text float-right entryicon" aria-hidden="true"></i></span>
      //return 'fa fa-file-text';
    case 'video':
      return  <span><i  className="fa fa-video-camera float-right icon-red entryicon" aria-hidden="true"></i></span>
      //return 'fa fa-video-camera';
    case 'audio':
      return  <span><i  className="fa fa-headphones float-right icon-orange entryicon" aria-hidden="true"></i></span>
    case 'forum':
        return  <span><i  className="fa fa-comments float-right icon-blue entryicon" aria-hidden="true"></i></span>
    default:
      return 'foo';
  }
}

render(){
  return(
    this.switch(this.props.type)
  );

  }

}

export default Type;

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。