Question

我正在使用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 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;

谢谢..

React-通过关键字实现对React中项目列表的搜索

0 个答案: