Javascript React-通过关键字对React中的项目列表进行搜索

我正在使用react构建一个搜索页面。下面是我的搜索组件，我尝试通过诸如唱片集名称、用户ID、标签和图像/视频标题来搜索下面的唱片集

我已经创建了搜索组件和相册组件以及用于列出相册的组件

我想知道如何链接搜索组件和相册列表组件，以便在键入搜索时过滤相册

注意-这里有两个搜索字段，第一个用于搜索和 第二个是用于不同的搜索。这里我只指 第一个搜索输入标记

如果有人知道，请查收

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import {
  Nav,
  Navbar,
  Collapse,
  DropdownMenu,
  DropdownItem,
  NavbarToggler,
  DropdownToggle,
  UncontrolledDropdown,
} from 'reactstrap';
import { Link, withRouter } from 'react-router-dom';
import Config from '../../../constants/config';
import { SidebarNavItems } from '../Sidebar';
import logoImages from '../../../images/logo.png';

require('./styles.scss');

        class Search extends Component {
                  constructor() {
                    super();
                    this.inputNames = ['input1', 'input2'];
                    this.state = {
                      hiddenInputs: {
                        input1: { hidden: false, first: true },
                        input2: { hidden: true, first: false },
                      },
                      expanded: false,
                    };
                  }

                  handleClick(name) {
                    const hI = Object.assign({}, this.state.hiddenInputs);
                    let expanded = this.state.expanded;

                    if (expanded && hI[name].first === true) {

                      expanded = false;
                    } else if (expanded) {
                      expanded = false;
                      this.inputNames.forEach((input) => {
                        const isSame = input === name;
                        hI[input].first = isSame;
                        hI[input].hidden = !isSame;
                      });
                    } else {
                      expanded = true;
                    }
                    this.setState({ expanded, hiddenInputs: hI });
                  }

                  render() {
                    const { input1, input2 } = this.state.hiddenInputs;
                    const { expanded } = this.state;
                    const clsName1 = `myInput${input1.hidden && !expanded ? ' hidden' : ''}${input1.first ? ' first' : ' second'}`;
                    const clsName2 = `myInput${input2.hidden && !expanded ? ' hidden' : ''}${input2.first ? ' first' : ' second'}`;
                    return (
                      <div className="search_bar">
                        <div className="input-container flex">
                           // this is the search tag I'm using to here. the below tag is for another  functionality
                          <input type="text" placeholder="Type a keyword " onClick={this.handleClick.bind(this, 'input1')} className={clsName1} />
                          <input type="password" placeholder="Type " onClick={this.handleClick.bind(this, 'input2')} className={clsName2} />
                        </div>
                      </div>
                    );
                  }
                }

                export default withRouter(Search);

import React，{Component}来自'React'；
从“道具类型”导入道具类型；
进口{
导航，
导航栏，
崩溃
下拉菜单，
下拉项，
纳瓦巴托格勒，
下拉开关，
不受控制的下降，
}来自“反应带”；
从“react router dom”导入{Link，withRouter}；
从“../../../constants/Config”导入配置；
从“../Sidebar”导入{SidebarNavItems}；
从“../../../images/logo.png”导入logoImages；
要求（'./styles.scss'）；
类搜索扩展组件{
构造函数（）{
超级（）；
this.inputNames=['input1'，'input2']；
此.state={
hiddenInputs：{
input1:{隐藏：假，第一：真}，
input2:{隐藏：真，第一：假}，
},
扩展：错，
};
}
handleClick（名称）{
const hI=Object.assign（{}，this.state.hiddenInputs）；
让expanded=this.state.expanded；
if（扩展的&&hI[name].first==true）{
扩展=假；
}else if（扩展）{
扩展=假；
this.inputNames.forEach（（输入）=>{
const isSame=input==name；
hI[input]。第一个=ISName；
hI[input]。隐藏=！IsName；
});
}否则{
扩展=真；
}
this.setState（{扩展，hiddenInputs:hI}）；
}
render（）{
const{input1，input2}=this.state.hiddenInputs；
const{expanded}=this.state；
const clsName1=`myInput${input1.hidden&&！expanded？'hidden'：'}${input1.first？'first'：'second'}`；
const clsName2=`myInput${input2.hidden&&！expanded？'hidden'：'}${input2.first？'first'：'second'}`；
返回(
//这是我在这里使用的搜索标记。下面的标记用于其他功能
);
}
}
使用路由器导出默认值（搜索）；

---

这些是我要筛选的个人相册

从“React”导入React；
从“道具类型”导入道具类型；
进口{
卡片、卡片正文、卡片标题、卡片页眉、卡片页脚、，
}来自“反应带”；
从“../buttons/FollowButton”导入FollowButton；
从“./ThumbnailSlider”导入ThumbnailSlider；
从“../../../images/no image.png”导入noImageSrc；
要求（'./styles.scss'）；
常量AlbumCard=（{album}）=>(
{album.user.alias_name！==“未定义”
？album.user.alias_name
：“${album.user.first\u name}${album.user.last\u name}”
20小时前
{album.statistic.view}
{album.statistic.likes}
{album.statistic.comments}
{album.title}
*/}
仅页脚
);
AlbumCard.propTypes={
相册：PropTypes.shape（）.isRequired，
};
导出默认存储卡；

这是加载相册的主要组件

从“React”导入React；
从“道具类型”导入道具类型；
从'reactstrap'导入{Row，Col}；
从“./卡”导入卡；
从“../Error”导入错误；
常量AlbumsListing=（{错误，正在加载，相册}）=>{
//错误
如果（错误）返回；
//建立挂牌卡
const cards=albums.map（item=>）；
//显示列表
返回(
{卡片}
);
};
AlbumsListing.propTypes={
错误：PropTypes.string，
加载：需要PropTypes.bool.isRequired，
相册：PropTypes.arrayOf（PropTypes.shape（））.isRequired，
};
AlbumsListing.defaultProps={
错误：null，
};
导出默认相册列表；

---

谢谢..

您在哪里使用搜索组件？@AbhaySehgal搜索组件在header组件中您的header组件和AlbumListing组件具有相同的父级？，您应该使用redux，它将提供应用程序级别的状态，然后您可以直接从搜索组件筛选相册列表，否则您必须将搜索字符串传递到相册列表组件，以筛选数组，这将使您的代码更加复杂complex@AbhaySehgal谢谢你的回复。是标题和相册，列出文件夹内的所有组件。我正在使用stater工具包，我想它已经设置了redux。我要起诉这套装备。你能检查一下redux是否已经存在，我能直接使用它吗？是的，它有redux，你可以将它包含在你的代码中

import React from 'react';
import PropTypes from 'prop-types';
import {
  Card, CardBody, CardTitle, CardHeader, CardFooter,
} from 'reactstrap';
import FollowButton from '../buttons/FollowButton';
import ThumbnailSlider from './ThumbnailSlider';

import noImageSrc from '../../../images/no-image.png';

require('./styles.scss');

const AlbumCard = ({ album }) => (
  <Card className="albummain">
    <CardHeader>
      <div className="row">
        <div className="col-md-8 d-flex align-items-center">
          <a
            href="link"
            title=""
          >
            <img
              src={
                Object.prototype.hasOwnProperty.call(album.user, 'profile_picture')
                  ? album.user.profile_picture.imgurlhere
                  : 'imglink'
              }
              className="rounded-circle img-fluid"
              alt="user name goes here"
            />
          </a>
          <div className="d-flex flex-fill flex-column">
            <div className="user-name-item">
              {album.user.alias_name !== 'undefined'
                ? album.user.alias_name
                : `${album.user.first_name} ${album.user.last_name}`}
            </div>
            <div className="date-item">
20 hours ago
            </div>
          </div>
          <FollowButton size="sm" className="follow-button" />
        </div>
        <div className="col-md-4 d-none d-md-flex justify-content-between align-items-center">
          <div className="d-flex flex-column">
            <i className="fas fa-eye" />
            {album.statistic.view}
          </div>
          <div className="d-flex flex-column">
            <i className="far fa-thumbs-up" />
            {album.statistic.likes}
          </div>
          <div className="d-flex flex-column">
            <i className="fas fa-comments" />
            {album.statistic.comments}
          </div>
        </div>
      </div>
    </CardHeader>
    <img
      className="img-top"
      src={
        Object.prototype.hasOwnProperty.call(album.picture, 'img url')
          ? album.picture.img url
          : noImageSrc
      }
      alt="title"
    />
    <CardBody>
        {album.title}
      </CardTitle> */}
      <div className="thumbnail-slider">
        <ThumbnailSlider thumbnails={album.thumbs} />
      </div>
    </CardBody>
    <CardFooter className="nothing">
just Footer
    </CardFooter>
  </Card>
);

AlbumCard.propTypes = {
  album: PropTypes.shape().isRequired,
};

export default AlbumCard;

import React from 'react';
import PropTypes from 'prop-types';
import { Row, Col } from 'reactstrap';
import Card from './Card';
import Error from '../Error';

const AlbumsListing = ({ error, loading, albums }) => {
  // Error
  if (error) return <Error content={error} />;

  // Build Cards for Listing
  const cards = albums.map(item => <Card album={item} key={`${item.id}`} />);

  // Show Listing
  return (
    <div className="albums-list-container">
      <Row className={loading ? 'content-loading' : ''}>
        <Col sm="12" className="card-columns">
          {cards}
        </Col>
      </Row>
    </div>
  );
};

AlbumsListing.propTypes = {
  error: PropTypes.string,
  loading: PropTypes.bool.isRequired,
  albums: PropTypes.arrayOf(PropTypes.shape()).isRequired,
};

AlbumsListing.defaultProps = {
  error: null,
};

export default AlbumsListing;