时间戳

首页 > 解决方案 > Reactjs 排序和过滤组件

reactjs - Reactjs 排序和过滤组件

问题描述

我是 React 的新手。我已经为分配实现了以下代码。目标是获取电影列表，并在单击电影时显示开场爬行。我决定为此使用两个组件，因为必须完成样式（左侧是电影，右侧是爬行）。

现在我需要另外两个选项：按年份或按 id 对电影进行排序，并使用上方的搜索栏进行过滤。

如何在组件中完成？

这是我的代码：

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

class StarWarsApp extends React.Component{
    constructor(props){
        super(props);
        this.handleSort = this.handleSort.bind(this);
        this.handleMovies = this.handleMovies.bind(this);
        this.handleClick = this.handleClick.bind(this);
        this.state = {
            movies: [],
            crawl: ['No movie selected']
        }

        this.handleMovies();
    }

    handleMovies(){
        fetch('"https://swapi.co/api/films"').then(results => {
            return results.json();
        }).then(data => {

            let movies = data.results;
            console.log(movies);
            this.setState(() => {
                return{ 
                    movies: movies 
                }
            })
        })
    }

    handleClick(event){
        fetch('https://swapi.co/api/films'+event.currentTarget.id).then(results => {
            return results.json();
        }).then(data => {
            let crawl = data.results.opening_crawl;
            this.setState(() => {
                return{ 
                    crawl:crawl 
                }
            })
        })
    }

    render(){
        const title = 'Star Wars';
        return(
            <div>
                <Header title={title}/>
                <Sort  handleSort={this.handleSort}/>
                <Movies handleClick={this.handleClick} movies={this.state.movies}/>
                <Crawl crawl={this.state.crawl}/>
            </div>
        )
    }
}   


class Header extends React.Component{
    render(){
        return(
            <div>
                <h1>{this.props.title}</h1>
            </div>
        )
    }
}

class Movies extends React.Component{
    render(){
        return(
            this.props.movies.map((movie) => 
            <div onClick={this.props.handleClick} id={movie.episode_id} key={movie.episode_id}>
                {
                <p><Movie title={movie.title}/></p> 
                }
            </div>
            )
        )
    }
}

class Movie extends React.Component{
    render(){
        return(
            <div>{this.props.title}</div>
        )
    }
}

class Crawl extends React.Component{
    render(){
        return(
            <div className="split right">
                {this.props.crawl}
            </div>
        )
    }
}


export default StarWarsApp;

标签： reactjssorting

解决方案

你的 handlesort 函数应该是这样的：

handleSort = () => {
  let copyOfMovies = this.state.movies.slice();
  const sortedMovies = movies.sort((a,b) => {
    const nameA = a.name.toUpperCase(); // ignore upper and lowercase
    const nameB = b.name.toUpperCase(); // ignore upper and lowercase
    if (nameA < nameB) {
      return -1;
    }
    if (nameA > nameB) {
      return 1;
    }
    return 0;
  });
  this.setState({movies:sortedMovies})
}

推荐阅读