Reagovat - provádění vyhledávání podle klíčových slov do seznamu položek v reakci

hlasů
0

Stavím vyhledávací stránku pomocí reagovat. Níže je můj dotaz prvek, který se snažím vyhledávat podle níže uvedených alba, jako je název alba, ID uživatele, tagy a název snímku / videa.

Vytvořil jsem vyhledávací složku a složku alba a komponenty pro výpis alb

Chtěl bych vědět, jak propojit součást hledání a výpis album komponenty pro filtraci alba při psaní vyhledávání.

Poznámka - tam jsou dvě vyhledávací pole tady, první z nich je pro vyhledávání a druhý je pro různé vyhledávání. Zde mám na mysli jen ke vstupnímu tagu první vyhledávání

jestli někdo ví, zkontrolujte.

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);

Jedná se o jednotlivé alb, které jsem chcete filtrovat

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;

To je hlavní součástí, které načte alba uvnitř

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;

dík..

Položena 10/08/2018 v 03:38
zdroj uživatelem
V jiných jazycích...                            

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more